/* ==========================================================================
   CRAVE · DESIGN TOKENS
   Single source of truth. Never hardcode colors, sizes, or radii.
   ========================================================================== */

:root {
  /* -- Brand -- */
  --color-brand-600: #0060FF;
  --color-brand-500: #0080FF;
  --color-brand-400: #00A0FF;
  --color-brand-300: #60EFFF;
  --color-brand-100: #DBEAFE;
  --color-brand-50:  #EFF6FF;

  /* -- Ink (neutrals) -- */
  --color-ink-0:    #FFFFFF;
  --color-ink-25:   #FAFAFB;
  --color-ink-50:   #F4F5F7;
  --color-ink-100:  #E6E8EC;
  --color-ink-200:  #D0D4DB;
  --color-ink-300:  #A9B0BB;
  --color-ink-400:  #78808E;
  --color-ink-500:  #5A6270;
  --color-ink-600:  #3F4652;
  --color-ink-700:  #2A2F39;
  --color-ink-800:  #181C24;
  --color-ink-900:  #0B0E14;

  /* -- Accents -- */
  --color-signal:   #10B981;   /* success / proof */
  --color-warm:     #F59E0B;   /* highlights */
  --color-critical: #EF4444;   /* alerts */

  /* -- Surfaces -- */
  --surface-page:      var(--color-ink-0);
  --surface-raised:    var(--color-ink-25);
  --surface-muted:     var(--color-ink-50);
  --surface-inverted:  var(--color-ink-900);
  --surface-brand:     var(--color-brand-600);

  /* -- Text -- */
  --text-strong:   var(--color-ink-900);
  --text-body:     var(--color-ink-700);
  --text-muted:    var(--color-ink-500);
  --text-subtle:   var(--color-ink-400);
  --text-inverse:  var(--color-ink-0);
  --text-brand:    var(--color-brand-600);

  /* -- Border -- */
  --border-subtle: var(--color-ink-100);
  --border-strong: var(--color-ink-200);
  --border-dark:   rgba(255, 255, 255, 0.08);

  /* -- Typography -- */
  --font-sans: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-xs:    0.75rem;   /* 12 */
  --fs-sm:    0.875rem;  /* 14 */
  --fs-base:  1rem;      /* 16 */
  --fs-md:    1.125rem;  /* 18 */
  --fs-lg:    1.25rem;   /* 20 */
  --fs-xl:    1.5rem;    /* 24 */
  --fs-2xl:   1.875rem;  /* 30 */
  --fs-3xl:   2.25rem;   /* 36 */
  --fs-4xl:   3rem;      /* 48 */
  --fs-5xl:   3.75rem;   /* 60 */
  --fs-6xl:   4.5rem;    /* 72 */
  --fs-display: 5.5rem;  /* 88 */

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  --tracking-tight:   -0.02em;
  --tracking-display: -0.035em;
  --tracking-wide:     0.12em;

  /* -- Spacing -- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* -- Radius -- */
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-pill:  9999px;

  /* -- Shadow -- */
  --shadow-sm:  0 1px 2px rgba(11, 14, 20, 0.06);
  --shadow-md:  0 4px 14px rgba(11, 14, 20, 0.08);
  --shadow-lg:  0 20px 40px rgba(11, 14, 20, 0.12);
  --shadow-xl:  0 32px 80px rgba(11, 14, 20, 0.20);
  --shadow-brand: 0 20px 40px rgba(0, 96, 255, 0.25);

  /* -- Motion -- */
  --ease:         cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast:   160ms;
  --duration-base:   240ms;
  --duration-slow:   420ms;

  /* -- Layout -- */
  --container-max:  80rem;
  --container-px:   var(--space-6);
  --nav-h:          72px;
}

@media (min-width: 1024px) {
  :root {
    --container-px: var(--space-10);
  }
}