/* ============================================
   YUMMY LABS — DESIGN OS TOKEN SYSTEM
   Extracted from Figma + extended for web
   ============================================ */

:root {
  /* === BRAND COLORS (from Figma) === */
  --color-red:          #EA475F;
  --color-teal:         #51C3DC;
  --color-green:        #08D8D7;
  --color-purple:       #584FFF;
  --color-purple-light: #7F79FF;
  --color-yellow:       #F1FF53;
  --color-blue:         #2216FF;
  --color-orange:       #FF6B35;
  --color-neutral:      #FAF7F5;
  --color-brown:        #320101;
  --color-red-800:      #6C0000;
  --color-white:        #FFFFFF;
  --color-black:        #000000;

  /* === SEMANTIC ALIASES === */
  --color-bg-dark:      var(--color-brown);
  --color-bg-light:     var(--color-neutral);
  --color-bg-accent:    var(--color-blue);
  --color-text-primary: var(--color-brown);
  --color-text-inverse: var(--color-white);
  --color-text-muted:   #6B5E5E;
  --color-accent:       var(--color-yellow);
  --color-cta-primary:  var(--color-blue);
  --color-cta-hover:    var(--color-purple);

  /* === TYPOGRAPHY === */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Fluid type scale */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --text-3xl:  clamp(2.5rem, 1.8rem + 3.5vw, 5rem);

  /* Font weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.06em;

  /* === SPACING (8px grid) === */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* === LAYOUT === */
  --container-max:  1280px;
  --container-pad:  var(--space-6);
  --section-pad-y:  clamp(4rem, 3rem + 5vw, 8rem);
  --grid-gap:       var(--space-8);

  /* === EFFECTS === */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill:  999px;

  --shadow-card:  0 1px 3px rgba(50, 1, 1, 0.06), 0 1px 2px rgba(50, 1, 1, 0.04);
  --shadow-hover: 0 10px 40px rgba(50, 1, 1, 0.08);
  --shadow-dark:  0 4px 20px rgba(0, 0, 0, 0.3);

  /* === TRANSITIONS === */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:  150ms;
  --duration-base:  300ms;
  --duration-slow:  500ms;
}