/* ============================================================
   BLOOMLY — DESIGN TOKENS
   Claymorphism Design System · Soft · Tactile · Vibrant
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ── Core Palette ── */
  --violet:       #7C3AED;
  --violet-light: #A78BFA;
  --violet-pale:  #EDE9FE;
  --violet-dark:  #5B21B6;

  --pink:         #EC4899;
  --pink-light:   #F9A8D4;
  --pink-pale:    #FCE7F3;
  --pink-dark:    #BE185D;

  --blue:         #3B82F6;
  --blue-light:   #93C5FD;
  --blue-pale:    #DBEAFE;
  --blue-dark:    #1D4ED8;

  --teal:         #14B8A6;
  --teal-light:   #5EEAD4;
  --teal-pale:    #CCFBF1;

  --orange:       #F97316;
  --orange-light: #FDB872;
  --orange-pale:  #FFEDD5;

  --green:        #22C55E;
  --green-light:  #86EFAC;
  --green-pale:   #DCFCE7;

  --amber:        #F59E0B;
  --amber-pale:   #FEF3C7;

  /* ── Surfaces ── */
  --surface:        #FFFFFF;
  --surface-1:      #FAFBFF;
  --surface-2:      #F4F0FE;
  --surface-3:      #EDE9FE;
  --bg:             #F7F4FE;
  --bg-warm:        #FDF8FF;

  /* ── Text ── */
  --text:           #1E1B4B;
  --text-secondary: #6B7280;
  --text-muted:     #9CA3AF;
  --text-inverse:   #FFFFFF;

  /* ── Category Colors ── */
  --cat-food:     #F97316;
  --cat-food-bg:  #FFF7ED;
  --cat-travel:   #3B82F6;
  --cat-travel-bg:#EFF6FF;
  --cat-tech:     #7C3AED;
  --cat-tech-bg:  #F5F3FF;
  --cat-wellness: #22C55E;
  --cat-wellness-bg:#F0FDF4;
  --cat-design:   #EC4899;
  --cat-design-bg:#FDF2F8;
  --cat-culture:  #F59E0B;
  --cat-culture-bg:#FFFBEB;

  /* ── Gradient Library ── */
  --grad-primary:   linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
  --grad-primary-h: linear-gradient(135deg, #6D28D9 0%, #DB2777 100%);
  --grad-blue:      linear-gradient(135deg, #3B82F6 0%, #7C3AED 100%);
  --grad-teal:      linear-gradient(135deg, #14B8A6 0%, #3B82F6 100%);
  --grad-warm:      linear-gradient(135deg, #F97316 0%, #EC4899 100%);
  --grad-green:     linear-gradient(135deg, #22C55E 0%, #14B8A6 100%);
  --grad-hero:      linear-gradient(160deg, #F5F3FF 0%, #FDF2F8 50%, #EFF6FF 100%);
  --grad-card:      linear-gradient(160deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 100%);

  /* ── Claymorphism Shadows ── */
  --clay-sm:
    0 2px 0 rgba(0,0,0,0.06),
    0 4px 8px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.8);
  --clay-md:
    0 4px 0 rgba(0,0,0,0.07),
    0 8px 24px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);
  --clay-lg:
    0 6px 0 rgba(0,0,0,0.07),
    0 12px 32px rgba(0,0,0,0.10),
    inset 0 2px 0 rgba(255,255,255,0.9);
  --clay-xl:
    0 8px 0 rgba(0,0,0,0.08),
    0 20px 48px rgba(0,0,0,0.12),
    inset 0 2px 0 rgba(255,255,255,0.95);
  --clay-hover:
    0 10px 0 rgba(0,0,0,0.08),
    0 24px 56px rgba(0,0,0,0.14),
    inset 0 2px 0 rgba(255,255,255,0.95);
  --clay-pressed:
    0 2px 0 rgba(0,0,0,0.08),
    0 4px 12px rgba(0,0,0,0.08),
    inset 0 2px 4px rgba(0,0,0,0.06);
  --clay-inset:
    inset 0 2px 6px rgba(0,0,0,0.07),
    inset 0 0 0 2px rgba(255,255,255,0.6);
  --clay-violet:
    0 6px 0 rgba(109,40,217,0.4),
    0 12px 28px rgba(124,58,237,0.25),
    inset 0 1px 0 rgba(255,255,255,0.25);
  --clay-pink:
    0 6px 0 rgba(190,24,93,0.35),
    0 12px 28px rgba(236,72,153,0.25),
    inset 0 1px 0 rgba(255,255,255,0.2);
  --clay-blue:
    0 6px 0 rgba(29,78,216,0.35),
    0 12px 28px rgba(59,130,246,0.25),
    inset 0 1px 0 rgba(255,255,255,0.2);

  /* ── Shape ── */
  --r-sm:   12px;
  --r-md:   16px;
  --r-lg:   20px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-3xl:  40px;
  --r-full: 9999px;

  /* ── Typography ── */
  --font-display: 'Nunito', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Type scale */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   1.25rem;
  --t-xl:   1.5rem;
  --t-2xl:  1.875rem;
  --t-3xl:  2.25rem;
  --t-4xl:  3rem;
  --t-5xl:  3.75rem;
  --t-6xl:  4.5rem;

  /* ── Spacing ── */
  --s-1:  4px;   --s-2:  8px;   --s-3:  12px;  --s-4:  16px;
  --s-5:  20px;  --s-6:  24px;  --s-8:  32px;  --s-10: 40px;
  --s-12: 48px;  --s-16: 64px;  --s-20: 80px;  --s-24: 96px;
  --s-32: 128px;

  /* ── Layout ── */
  --max-w:        1280px;
  --max-w-narrow: 800px;

  /* ── Motion ── */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:     cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-mid:     220ms;
  --dur-slow:    380ms;

  /* ── Blur ── */
  --blur-sm: blur(8px);
  --blur-md: blur(16px);
  --blur-lg: blur(24px);
}