/* =====================================================================
   LaQuest Payroll — Design Tokens (Phase 13 · light gray + soft pastel)
   Inter. A LIGHT, gray-themed, soft-pastel system with a single soft-blue
   accent (#1e36c9) — never navy. The exact palette below is the SOURCE OF
   TRUTH; every primitive and semantic token aliases into it, so components
   carry no hardcoded hex. Neutral-slate dark theme overrides the block.
   ===================================================================== */

:root {
  /* ============================ PALETTE BLOCK ======================== */
  /* The only place raw colours live. Reference these everywhere.        */
  --canvas:#eef2fc; --card:#ffffff; --line:#dee5f3; --line-2:#c8d2e8;
  --ink:#16181f; --ink-2:#3a3d45; --muted:#5c6270; --faint:#6b7280; /* A11y: muted/faint darkened to clear 4.5:1 on tints (were #6e7178 / #9ca0a6) */
  --blue:#1e36c9; --blue-hover:#182ba6; --blue-t:#e9ecfb; --blue-t2:#f1f2fc;
  --green:#10b981; --green-t:#e7f6ef; --green-text:#0b7d5c; /* fill vs text — approved page 4 */
  --orange:#f59e42; --orange-t:#fff2e6;
  --purple:#8b5cf6; --purple-t:#f1ebfd;
  --teal:#14b8a6; --teal-t:#e6f7f5;
  --red:#ef6b6b; --red-t:#fdecec; --red-text:#c04747;
  --amber:#f0a12e; --amber-t:#fef4e6; --amber-text:#9d6210;
  /* =================================================================== */

  /* --- Primitive aliases (legacy names → palette) ------------------- */
  --slate-50: var(--canvas); --slate-100: var(--canvas); --slate-150: var(--line);
  --slate-200: var(--line); --slate-300: var(--line-2); --slate-400: var(--faint);
  --slate-500: var(--muted); --slate-600: var(--ink-2); --slate-700: var(--ink-2);
  --slate-800: var(--ink); --slate-900: var(--ink); --slate-950: var(--ink);
  --blue-50: var(--blue-t); --blue-100: var(--blue-t); --blue-200: var(--blue-t);
  --blue-400: var(--blue); --blue-500: var(--blue); --blue-600: var(--blue);
  --blue-700: var(--blue-hover); --blue-800: var(--blue-hover);
  --teal-500: var(--teal); --teal-600: var(--teal);
  --gold-500: var(--amber); --gold-600: var(--amber); --gold-50: var(--amber-t);
  --green-50: var(--green-t); --green-100: var(--green-t); --green-500: var(--green); --green-600: var(--green); --green-700: var(--green);
  --amber-50: var(--amber-t); --amber-100: var(--amber-t); --amber-500: var(--amber); --amber-600: var(--amber); --amber-700: var(--amber);
  --red-50: var(--red-t); --red-100: var(--red-t); --red-500: var(--red); --red-600: var(--red); --red-700: var(--red);
  --purple-500: var(--purple);
  --white: var(--card); --black: var(--ink);

  /* Spacing scale — UNIFIED: aliased BY VALUE to the newer --lq-space-* scale (the intended
     density pass) so the whole app shares one spacing system. Aliased by role/value, not by index
     (old --space-8=40 maps to --lq-space-12=36, NOT --lq-space-8=26). --space-10 has no lq peer, kept. */
  --space-0: 0;   --space-1: var(--lq-space-1);  --space-2: var(--lq-space-2);  --space-3: var(--lq-space-3);
  --space-4: var(--lq-space-4); --space-5: var(--lq-space-5); --space-6: var(--lq-space-6); --space-7: var(--lq-space-8);
  --space-8: var(--lq-space-12); --space-9: var(--lq-space-16); --space-10: 72px;

  /* Radii — panels ~14px */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: var(--lq-radius-md); /* 10 → 12, matches card rounding */
  --radius-lg: var(--lq-radius-lg); /* 14 → 16 */
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* Typography — Inter (loaded in index.html) */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Inter', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-md: 14px;
  --text-lg: 16px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 38px;

  --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.55;

  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extra: 800;

  --tracking-tight: -0.014em; --tracking-snug: -0.008em; --tracking-label: 0.05em;

  /* Elevation — soft shadow only */
  --shadow-xs: 0 1px 2px rgba(31, 39, 51, 0.04);
  --shadow-sm: 0 1px 2px rgba(31, 39, 51, 0.04), 0 6px 18px rgba(31, 39, 51, 0.05);
  --shadow-md: 0 1px 2px rgba(31, 39, 51, 0.05), 0 12px 28px rgba(31, 39, 51, 0.07);
  --shadow-lg: 0 8px 24px rgba(31, 39, 51, 0.10), 0 24px 48px rgba(31, 39, 51, 0.10);
  --shadow-focus: 0 0 0 3px var(--color-ring);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms; --dur-med: 200ms; --dur-slow: 360ms;

  --z-base: 1; --z-sticky: 100; --z-nav: 200; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100;

  /* --- Semantic tokens (components consume these) ------------------- */
  color-scheme: light;

  --color-canvas:        var(--canvas);
  --color-surface:       var(--card);
  --color-surface-sunken: var(--canvas);
  --color-surface-hover:  var(--canvas);
  --color-ink:           var(--ink);
  --color-body:          var(--ink-2);
  --color-ink-muted:     var(--muted);
  --color-ink-subtle:    var(--faint);
  --color-ink-inverse:   var(--card);

  --color-border:        var(--line);
  --color-border-strong: var(--line-2);
  --color-border-focus:  var(--blue);
  --color-hairline:      var(--line);

  --color-primary:        var(--blue);
  --color-primary-hover:  var(--blue-hover);
  --color-primary-active: var(--blue-hover);
  --color-primary-ink:    var(--blue);
  --color-primary-weak:   var(--blue-t);
  --color-primary-weak-fg: var(--blue);
  --color-on-primary:     var(--card);
  --color-link:           var(--blue);
  --color-ring:           rgba(30, 54, 201, 0.30);
  --color-overlay:        rgba(31, 39, 51, 0.45);

  /* Soft-pastel icon tiles (rotate) */
  /* Decorative icon tiles neutralised (reduce colour noise): one cobalt accent tile,
     the rest warm-neutral. Colour is reserved for brand/primary data + real status. */
  --tile-1-bg: var(--blue-t);          --tile-1-fg: var(--blue);
  --tile-2-bg: var(--lq-surface-subtle); --tile-2-fg: var(--muted);
  --tile-3-bg: var(--lq-surface-subtle); --tile-3-fg: var(--muted);
  --tile-4-bg: var(--lq-surface-subtle); --tile-4-fg: var(--muted);

  --color-progress:       var(--green);
  --color-progress-track: var(--line);

  --color-delta-up:   var(--green);
  --color-delta-down: var(--red);

  --viz-1: var(--blue); --viz-2: var(--teal); --viz-3: var(--faint); --viz-grid: var(--line);

  --color-gold:      var(--amber);
  --color-gold-weak: var(--amber-t);

  --color-success: var(--green); --color-success-weak: var(--green-t); --color-success-fg: var(--green);
  --color-warning: var(--amber); --color-warning-weak: var(--amber-t); --color-warning-fg: var(--amber);
  --color-danger:  var(--red);   --color-danger-weak:  var(--red-t);   --color-danger-fg:  var(--red);
  --color-info:    var(--muted); --color-info-weak:    var(--canvas);  --color-info-fg:    var(--ink-2);

  /* Light sidebar */
  --color-sidebar-bg:        var(--card);
  --color-sidebar-fg:        var(--muted);
  --color-sidebar-fg-strong: var(--ink);
  --color-sidebar-active-bg: var(--blue-t);
  --color-sidebar-active-fg: var(--blue);
  --color-sidebar-border:    var(--line);

  --color-money:     var(--ink);
  --color-money-neg: var(--red);
  --color-money-pos: var(--green);

  --text-body: var(--text-md); --text-label: var(--text-xs);
  --text-h1: var(--text-2xl); --text-h2: var(--text-2xl); --text-h3: var(--text-xl); --text-h4: var(--text-lg);

  /* ===================================================================== */
  /* PROTOTYPE DESIGN SYSTEM TOKENS (source of truth for the new UI).       */
  /* Same palette as above; adds the deep/light tints, radii, elevation and */
  /* easing the approved prototype uses. Components carry no hardcoded hex.  */
  /* ===================================================================== */
  --line-soft:#f2f3f6; --wash:#fafbfc; --ghost:#767c86; /* A11y: placeholder/ghost darkened from #b0b6bf for readability */
  --blue-d:#14238a; --blue-l:#4a5fd8;
  --green-d:#0a7d5c;
  --orange-d:#b9741a;
  --purple-d:#6d3fe0;
  --teal-d:#0d8478;
  --red-d:#c94a4a;
  --amber-d:#b9741a;
  --r-xs:8px; --r-sm:var(--lq-radius-md); --r:var(--lq-radius-lg); --r-lg:20px; --r-xl:26px; --r-pill:999px;
  --lift:0 1px 2px rgba(22,24,31,.04), 0 8px 20px -14px rgba(22,24,31,.10);
  --lift-h:0 4px 12px -6px rgba(22,24,31,.08), 0 18px 40px -20px rgba(22,24,31,.14);
  --lift-xl:0 24px 60px -24px rgba(22,24,31,.20);
  --ease:cubic-bezier(.22,.61,.36,1);
  --fast:.16s var(--ease); --med:.3s var(--ease); --slow:.5s var(--ease);
}

/* ===================================================================== */
/* DARK — neutral slate, same soft accents (never navy).                  */
/* Overrides the palette block; the semantic aliases flow through.        */
/* ===================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas:#0A0C12; --card:#161A24; --line:#2A3142; --line-2:#3B4458;
  --ink:#EDF0F7; --ink-2:#C3C8D2; --muted:#9aa2af; --faint:#6b7280;
  --blue:#4C6BF5; --blue-hover:#6683FF; --blue-t:rgba(76,107,245,0.16); --blue-t2:rgba(76,107,245,0.10);
  --green:#3FCE93; --green-t:rgba(63,206,147,0.16); --green-text:#3FCE93;
  --orange:#f5b164; --orange-t:rgba(245,158,66,0.16);
  --purple:#a78bfa; --purple-t:rgba(139,92,246,0.22);
  --teal:#2dd4bf; --teal-t:rgba(20,184,166,0.16);
  --red:#f78a8a; --red-t:rgba(239,107,107,0.18); --red-text:#f78a8a;
  --amber:#f0b352; --amber-t:rgba(240,161,46,0.16); --amber-text:#f0b352;

  /* Surfaces that need a distinct dark value (sunken/hover a touch lighter) */
  --color-surface-sunken: #1F2536;
  --color-surface-hover:  #1F2536;
  --color-ring: rgba(76, 107, 245, 0.40);
  --color-overlay: rgba(0, 0, 0, 0.62);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.40), 0 12px 28px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50), 0 24px 48px rgba(0, 0, 0, 0.45);

  /* Prototype tokens — dark */
  --line-soft:#1F2536; --wash:#161A24; --ghost:#5b626d;
  --blue-d:#6683FF; --blue-l:#6683FF; --green-d:#3FCE93; --orange-d:#f5b164;
  --purple-d:#a78bfa; --teal-d:#2dd4bf; --red-d:#f78a8a; --amber-d:#f0b352;
  --lift:0 1px 2px rgba(0,0,0,.35);
  --lift-h:0 12px 32px rgba(0,0,0,.45);
  --lift-xl:0 24px 60px rgba(0,0,0,.55);
}

/* No-JS fallback: honour OS preference before the boot script stamps data-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
}