/* ============================================================================
   tokens.css — raw, theme-independent primitives (the single source of truth)
   Palette per brief: primary #2563EB · light surface #F8FAFC · dark ink #1A1A22
   Philosophy: trustworthy + clean. Blue is the only brand colour; everything
   else is a neutral grey scale so the *content* stays the hero.
   ========================================================================== */

:root {
  /* --- Brand blue scale (primary = 600) --- */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;   /* PRIMARY */
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;

  /* --- Neutral (slate) scale; 50 = #F8FAFC from the brief --- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;

  /* --- Dark-mode inks, anchored on #1A1A22 from the brief --- */
  --ink-900: #15151b;
  --ink-800: #1a1a22;   /* dark base surface */
  --ink-700: #22222c;
  --ink-600: #2a2a35;
  --ink-500: #33333f;
  --ink-400: #44444f;

  /* --- Status --- */
  --green-500: #10b981;
  --amber-500: #f59e0b;
  --red-500:   #ef4444;

  /* --- Typography --- */
  --font-sans:    'Inter', 'IBM Plex Sans Thai', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Manrope', 'Inter', 'IBM Plex Sans Thai', 'Noto Sans SC', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid type scale (min → max via clamp) */
  --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:   clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);  /* 22→28 */
  --fs-2xl:  clamp(1.75rem, 1.3rem + 2.2vw, 2.5rem);    /* 28→40 */
  --fs-3xl:  clamp(2.25rem, 1.6rem + 3.4vw, 3.5rem);    /* 36→56 */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.65;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-x:      800;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;

  /* --- Spacing scale (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;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Radius --- */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-full: 999px;

  /* --- Shadows (soft, low-contrast — matches the "calm" direction) --- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.12);

  /* --- Motion --- */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:    0.15s;
  --dur:         0.24s;
  --dur-slow:    0.4s;

  /* --- Layout --- */
  --container:      1200px;
  --container-wide: 1320px;
  --gutter:         clamp(1rem, 0.4rem + 2.4vw, 2rem);
  --header-h:       68px;

  /* --- Breakpoints (Tailwind v4 scale) ---
     NOTE: CSS @media cannot read var(), so these are DOCUMENTATION constants.
     The same px values are written literally in the media queries of grid.css;
     keep the two in sync if you ever retune them. */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* --- Z-index scale --- */
  --z-header:  100;
  --z-dropdown:500;
  --z-drawer:  900;
  --z-toast:   1000;
  --z-panel:   1100;

  /* --- Breakpoints (for reference in comments; media queries use px) ---
     sm 480 · md 768 (tablet) · lg 1024 (desktop) · xl 1280 (wide) */
}