/**
 * Yuzu.solutions — Design Tokens
 * ---------------------------------------------------------------------------
 * Single source of truth for the live site, mirroring the design-system
 * handbook (yuzu_design_system/handbook.html). Every color, font, radius,
 * spacing and shadow used on the site resolves to one of these variables.
 *
 * Canonical brand tones (★ = base / 500):
 *   Electric Yuzu  100 #FEF6DA · 300 #FBE077 · 500 #F8C607 · 700 #BC9605 · 900 #685303
 *   Zest Green     100 #EEF8E4 · 300 #A8D97A · 500 #86C54A · 700 #5E8F33 · 900 #2F4719
 *   Soft Kumquat   100 #FFF3E6 · 300 #FFB870 · 500 #FF9F43 · 700 #CC7F36 · 900 #663F1B
 *   Carbon Slate   100 #E8E9EA · 300 #8B9294 · 500 #2D3436 · 700 #1F2426 · 900 #0F1213
 *   Paper White    100 #FFFFFF · 300 #FCFCFC · 500 #F9F9F9 · 700 #E5E5E5 · 900 #B3B3B3
 *
 * Tints 25/50 sit above 100 for the lightest backgrounds; intermediate steps
 * (200/400/600/800/950) are interpolated so Tailwind's full numeric scale can
 * be mapped onto the brand palette (see tailwind-config.js).
 */

:root {
  /* ── Electric Yuzu ── */
  --yuzu-25:  #FFFDF5;
  --yuzu-50:  #FEFAEB;
  --yuzu-100: #FEF6DA;
  --yuzu-200: #FDEBA8;
  --yuzu-300: #FBE077;
  --yuzu-400: #F9D034;
  --yuzu-500: #F8C607; /* ★ base */
  --yuzu-600: #DAAE06;
  --yuzu-700: #BC9605;
  --yuzu-800: #907304;
  --yuzu-900: #685303;
  --yuzu-950: #453702;

  /* ── Zest Green ── */
  --zest-25:  #FAFDF8;
  --zest-50:  #F5FBEF;
  --zest-100: #EEF8E4;
  --zest-200: #CDE9B0;
  --zest-300: #A8D97A;
  --zest-400: #97CF62;
  --zest-500: #86C54A; /* ★ base */
  --zest-600: #72AA3E;
  --zest-700: #5E8F33;
  --zest-800: #466B26;
  --zest-900: #2F4719;
  --zest-950: #1C2B0F;

  /* ── Soft Kumquat ── */
  --kumquat-25:  #FFFBF7;
  --kumquat-50:  #FFF8F0;
  --kumquat-100: #FFF3E6;
  --kumquat-200: #FFD9B3;
  --kumquat-300: #FFB870;
  --kumquat-400: #FFAC5A;
  --kumquat-500: #FF9F43; /* ★ base */
  --kumquat-600: #E68C3C;
  --kumquat-700: #CC7F36;
  --kumquat-800: #995F28;
  --kumquat-900: #663F1B;
  --kumquat-950: #402810;

  /* ── Carbon Slate ── */
  --carbon-25:  #F7F8F8;
  --carbon-50:  #F4F5F5;
  --carbon-100: #E8E9EA;
  --carbon-200: #C8CBCC;
  --carbon-300: #8B9294;
  --carbon-400: #5C6567;
  --carbon-500: #2D3436; /* ★ base */
  --carbon-600: #262C2E;
  --carbon-700: #1F2426;
  --carbon-800: #171B1C;
  --carbon-900: #0F1213;
  --carbon-950: #080A0A;

  /* ── Paper White ── */
  --paper-25:  #FFFFFF;
  --paper-50:  #FFFFFF;
  --paper-100: #FFFFFF;
  --paper-200: #FCFCFC;
  --paper-300: #FCFCFC;
  --paper-400: #F2F2F2;
  --paper-500: #F9F9F9; /* ★ base */
  --paper-600: #ECECEC;
  --paper-700: #E5E5E5;
  --paper-800: #CCCCCC;
  --paper-900: #B3B3B3;

  /* ── Error (semantic red ramp) ── */
  --error-25:  #FEF8F7;
  --error-50:  #FDECEA;
  --error-100: #FADBD8;
  --error-200: #F5B7B1;
  --error-300: #F1948A;
  --error-400: #EC7063;
  --error-500: #E74C3C;
  --error-600: #CB4335;
  --error-700: #B03A2E;
  --error-800: #943126;
  --error-900: #78281F;
  --error-950: #5A1E17;

  /* ── Info (semantic blue ramp) ── */
  --info-25:  #F7FBFE;
  --info-50:  #EBF5FB;
  --info-100: #D6EAF8;
  --info-300: #85C1E9;
  --info-500: #3498DB;
  --info-700: #2471A3;
  --info-900: #1A5276;

  /* ── Semantic aliases ── */
  --color-bg: var(--zest-25);
  --color-surface: var(--paper-100);
  --color-text: var(--carbon-500);
  --color-text-muted: var(--carbon-300);
  --color-border: var(--paper-700);
  --success: var(--zest-500);
  --warning: var(--kumquat-500);
  --error: var(--error-500);
  --info: var(--info-500);

  /* ── Typography ── */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;

  --text-display: 4.5rem;
  --text-h1: 3rem;
  --text-h2: 1.875rem;
  --text-h3: 1.5rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;

  --tracking-tighter: -0.04em;
  --tracking-wide: 0.05em;
  --tracking-widest: 0.1em;

  /* ── Border radius ── */
  --radius-sm: 0.375rem;  /* 6px  */
  --radius-md: 0.75rem;   /* 12px */
  --radius-lg: 1rem;      /* 16px */
  --radius-xl: 1.5rem;    /* 24px */
  --radius-2xl: 2rem;     /* 32px */
  --radius-full: 9999px;

  /* ── Shadows (Carbon-tinted) ── */
  /* Cards: shadow-only elevation — no strokes or borders */
  --shadow-sm: 0 1px 2px rgba(45, 52, 54, 0.05);
  --shadow-md: 0 4px 12px rgba(45, 52, 54, 0.08);
  --shadow-lg: 0 8px 24px rgba(45, 52, 54, 0.12);
  --shadow-xl: 0 20px 50px rgba(45, 52, 54, 0.15);

  /* ── Brand gradient ── */
  --gradient-yuzu: linear-gradient(135deg, var(--yuzu-600) 0%, var(--kumquat-500) 100%);

  /* ── Motion ── */
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --ease-default: ease;

  /* ── Layout ── */
  --max-width-content: 64rem;
  --max-width-prose: 42rem;

  /* ── Spacing (4px base) ── */
  --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;
}