/* ============================================================================
   TOKENS — ERP.AI Design System (Brutalist)
   Dark-mode-aware tokens. Static tokens (fonts, type scale, radii, easings)
   live in @theme (base.njk). This file holds values that change light ↔ dark.

   Light-first: :root = light palette (for Tailwind compat), html.dark = dark overrides.
   The flash-prevention script in base.njk defaults preference to light when unset.

   Colors in oklch(L% C H) — perceptually uniform, Tailwind v4-native.
   Warm beige family uses hue 78° throughout for palette coherence.
   ============================================================================ */

:root {
  /* == ERP.AI Color System (Light Mode) ====================================== */
  --background: oklch(93.5% 0.012 78);
  --foreground: oklch(15% 0 0);
  --card: oklch(93.5% 0.012 78);
  --card-foreground: oklch(15% 0 0);
  --primary: oklch(55% 0.21 28);
  --primary-foreground: oklch(100% 0 0);
  --secondary: oklch(89.5% 0.01 78);
  --secondary-foreground: oklch(15% 0 0);
  --muted: oklch(89.5% 0.01 78);
  --muted-foreground: oklch(44% 0 0);
  --accent: oklch(55% 0.21 28);
  --accent-foreground: oklch(100% 0 0);
  --destructive: oklch(48% 0.19 28);
  --destructive-foreground: oklch(100% 0 0);
  --border: oklch(82% 0.012 78); /* warmed — was #ccc (neutral) */
  --outline: oklch(82% 0.012 78);
  --outline-variant: oklch(0% 0 0 / 5%);
  --ring: oklch(55% 0.21 28);

  /* == ERP.AI Palette (constant across themes) =============================== */
  --red: oklch(55% 0.21 28);
  --red-dark: oklch(48% 0.19 28);
  --grn: oklch(73% 0.196 148);
  --ylw: oklch(75% 0.176 84);
  --pur: oklch(66% 0.18 287);
  --org: oklch(67% 0.21 45);
  --gold: oklch(68% 0.04 72);

  /* == Semantic aliases (inverted for light mode per DESIGN.md) ============== */
  --dark: oklch(93.5% 0.012 78);
  --darker: oklch(89.5% 0.01 78);
  --cream: oklch(15% 0 0);
  --cream-d: oklch(10% 0 0);
  --text-l: oklch(15% 0 0);
  --text-m: oklch(44% 0 0);
  /* Primary nav / sticky strips — darker than --text-m for small caps legibility */
  --nav-link: oklch(30% 0 0);
  --text-d: oklch(98% 0.006 78);
  --brd: oklch(82% 0.012 78);

  /* == Surface system ======================================================== */
  --surface: oklch(93.5% 0.012 78);
  --surface-dim: oklch(89.5% 0.01 78);
  --surface-bright: oklch(96.5% 0.008 78);
  --surface-container: oklch(89.5% 0.01 78);
  --surface-container-highest: oklch(84.5% 0.011 78);
  --surface-invert: oklch(15% 0 0);
  --on-surface: oklch(15% 0 0);
  --on-surface-variant: oklch(44% 0 0);

  /* == Elevation / shadows (prefixed — @theme maps --shadow-* → --_shadow-*) = */
  --_shadow-1: 0 1px 3px 1px rgb(0 0 0 / 6%), 0 1px 2px rgb(0 0 0 / 8%);
  --_shadow-2: 0 2px 6px 2px rgb(0 0 0 / 6%), 0 1px 2px rgb(0 0 0 / 8%);
  --_shadow-3: 0 4px 8px 3px rgb(0 0 0 / 6%), 0 1px 3px rgb(0 0 0 / 8%);
  --_shadow-4: 5px 5px 0px oklch(15% 0 0);
  --_shadow-5: 6px 6px 0px oklch(15% 0 0);

  /* == Spacing scale (used by custom CSS via var(); TW uses --spacing multiplier) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* == Durations + easings (no TW4 theme namespace — used by custom CSS) ===== */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --ease-angular: cubic-bezier(0.4, 0, 0, 1);

  /* == Z-index (no TW4 theme namespace — used by custom CSS) ================= */
  --z-base: 1;
  --z-above: 10;
  --z-nav: 50;
  --z-overlay: 90;
  --z-modal: 100;
  --z-skip: 9999;
}

/* == Dark mode (opt-in via html.dark) ======================================= */
html.dark {
  --background: oklch(15% 0 0);
  --foreground: oklch(93.5% 0.012 78);
  --card: oklch(10% 0 0);
  --card-foreground: oklch(93.5% 0.012 78);
  --primary: oklch(55% 0.21 28);
  --primary-foreground: oklch(100% 0 0);
  --secondary: oklch(10% 0 0);
  --secondary-foreground: oklch(93.5% 0.012 78);
  --muted: oklch(17% 0 0);
  --muted-foreground: oklch(57% 0 0);
  --accent: oklch(55% 0.21 28);
  --accent-foreground: oklch(100% 0 0);
  --destructive: oklch(55% 0.21 28);
  --destructive-foreground: oklch(100% 0 0);
  --border: oklch(20% 0 0);
  --outline: oklch(20% 0 0);
  --outline-variant: oklch(100% 0 0 / 5%);
  --ring: oklch(55% 0.21 28);

  /* Semantic aliases invert */
  --dark: oklch(15% 0 0);
  --darker: oklch(10% 0 0);
  --cream: oklch(93.5% 0.012 78);
  --cream-d: oklch(89.5% 0.01 78);
  --text-l: oklch(95% 0 0);
  --text-m: oklch(57% 0 0);
  --nav-link: oklch(77% 0.01 78);
  --text-d: oklch(15% 0 0);
  --brd: oklch(20% 0 0);

  /* Surface system */
  --surface: oklch(15% 0 0);
  --surface-dim: oklch(10% 0 0);
  --surface-bright: oklch(17% 0 0);
  --surface-container: oklch(17% 0 0);
  --surface-container-highest: oklch(20% 0 0);
  --surface-invert: oklch(93.5% 0.012 78);
  --on-surface: oklch(93.5% 0.012 78);
  --on-surface-variant: oklch(57% 0 0);

  /* Shadows — brutalist hard shadows in dark mode */
  --_shadow-1: 0 1px 3px 1px rgb(0 0 0 / 30%), 0 1px 2px rgb(0 0 0 / 30%);
  --_shadow-2: 0 2px 6px 2px rgb(0 0 0 / 30%), 0 1px 2px rgb(0 0 0 / 30%);
  --_shadow-3: 0 4px 8px 3px rgb(0 0 0 / 30%), 0 1px 3px rgb(0 0 0 / 30%);
  --_shadow-4: 5px 5px 0px oklch(100% 0 0 / 10%);
  --_shadow-5: 6px 6px 0px oklch(100% 0 0 / 10%);
}