/* ═══════════════════════════════════════════════════════════════════
   CAREERSTUDIOMAX — CANONICAL THEME TOKENS (single source of truth)

   Load this FIRST on every page (before any page <style>). Theme state is
   `data-theme="dark|light"` on <html>, set before first paint by
   /js/theme-init.js (saved choice > system preference > dark default).

   Layer 1  --cs-*   semantic tokens (the real definitions, per theme)
   Layer 2  legacy   --bg/--s/--e/--el, --t0..--t3, --bd0..--bd2,
                     --void/--surface/--elevated/--float, --text-0..3, ...
                     are ALIASES of layer 1, so the ~57 existing pages that
                     were written against those names keep working with no
                     per-page copies of the palette.

   Pages must NOT redeclare these names in their own :root /
   [data-theme="light"] blocks (test/regression/themeConsolidation.test.js
   enforces it); only genuinely page-specific variables belong there.

   Contrast (WCAG AA, measured with the theme scanner on the real pages):
   muted/secondary text >= 4.5:1 on every surface of its theme. The previous
   --t3 (#59595f dark / #a1a1aa light) was 2.4-2.8:1 and 2.3-2.6:1.
   ═══════════════════════════════════════════════════════════════════ */

:root,
:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;

  /* surfaces */
  --cs-bg:            #0a0a0b;   /* page background */
  --cs-surface:       #141416;   /* cards, panels */
  --cs-surface-raised:#1a1a1d;   /* elevated: menus, hovered cards */
  --cs-surface-float: #1f1f23;   /* floating: modals, popovers, tooltips */
  --cs-input-bg:      #141416;
  --cs-overlay:       rgba(0,0,0,.62);
  --cs-header-bg:     rgba(10,11,15,.95);   /* sticky page headers */
  --cs-inset:         rgba(0,0,0,.28);   /* recessed wells / code blocks */

  /* text */
  --cs-text:          #f5f5f6;   /* primary */
  --cs-text-2:        #d4d4d8;   /* secondary */
  --cs-text-muted:    #a1a1aa;   /* muted   (>= 6:1 on all dark surfaces) */
  --cs-text-faint:    #8a8a92;   /* placeholder / hints (>= 4.8:1) */
  --cs-text-inverse:  #0a0a0b;   /* text on light/accent-filled surfaces */
  --cs-placeholder:   #8a8a92;
  --cs-disabled:      #6b6b73;   /* intentionally below AA (WCAG exempts disabled) */

  /* borders */
  --cs-border-subtle: rgba(255,255,255,.06);
  --cs-border:        rgba(255,255,255,.10);
  --cs-border-strong: rgba(255,255,255,.16);

  /* interaction */
  --cs-hover:         rgba(255,255,255,.05);
  --cs-selected:      rgba(91,124,153,.16);
  --cs-focus:         #7d9cb8;

  /* accent + status */
  --cs-accent:        #587994;   /* fill: white text on it is >= 4.5:1 */
  --cs-accent-text:   #86a4bf;   /* accent used AS TEXT on dark surfaces (>= 4.5:1 on every dark surface/tint) */
  --cs-success:       #22c55e;
  --cs-warning:       #f59e0b;
  --cs-error:         #ef4444;
  --cs-info:          #5b7c99;

  /* component tokens: status colours used AS TEXT, and the filled accent button */
  --text-link:            #86a4bf;
  --text-accent:          #86a4bf;
  --text-status-success:  #4ade80;
  --text-status-warning:  #fbbf24;
  --text-status-error:    #f87171;
  --text-status-info:     #86a4bf;
  --button-accent-bg:     #587994;
  --button-accent-bg-hover:#4d6d88;
  --button-accent-text:   #ffffff;

  /* elevation */
  --cs-shadow-sm: 0 1px 2px rgba(0,0,0,.24);
  --cs-shadow-md: 0 4px 16px rgba(0,0,0,.28);
  --cs-shadow-lg: 0 12px 32px rgba(0,0,0,.32);
}

[data-theme="light"],
:root[data-theme="light"] {
  color-scheme: light;

  --cs-bg:            #ffffff;
  --cs-surface:       #f9fafb;   /* cards on the white page */
  --cs-surface-raised:#f3f5f9;   /* raised/hovered: still separable from bg AND surface */
  --cs-surface-float: #eceff5;   /* legacy --el fills (chips, wells); modals set their own bg + shadow */
  --cs-input-bg:      #ffffff;
  --cs-overlay:       rgba(15,23,42,.45);
  --cs-header-bg:     rgba(255,255,255,.94);
  --cs-inset:         rgba(15,23,42,.05);

  --cs-text:          #16161a;
  --cs-text-2:        #3f3f46;
  --cs-text-muted:    #52525b;   /* >= 6:1 on all light surfaces */
  --cs-text-faint:    #666670;   /* placeholder / hints (>= 5:1) */
  --cs-text-inverse:  #ffffff;
  --cs-placeholder:   #666670;
  --cs-disabled:      #a1a1aa;

  --cs-border-subtle: rgba(0,0,0,.05);
  --cs-border:        rgba(0,0,0,.10);
  --cs-border-strong: rgba(0,0,0,.16);

  --cs-hover:         rgba(0,0,0,.04);
  --cs-selected:      rgba(74,106,134,.12);
  --cs-focus:         #3d5872;

  --cs-accent:        #4a6a86;
  --cs-accent-text:   #3d5872;
  --cs-success:       #15803d;   /* >= 5:1 as text on white AND usable as a fill */
  --cs-warning:       #b45309;
  --cs-error:         #dc2626;
  --cs-info:          #4a6a86;

  --text-link:            #2f4a63;
  --text-accent:          #35526c;
  --text-status-success:  #166534;
  --text-status-warning:  #92400e;
  --text-status-error:    #b91c1c;
  --text-status-info:     #35526c;
  --button-accent-bg:     #4a6a86;
  --button-accent-bg-hover:#3d5872;
  --button-accent-text:   #ffffff;

  --cs-shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --cs-shadow-md: 0 4px 12px rgba(16,24,40,.08);
  --cs-shadow-lg: 0 12px 28px rgba(16,24,40,.10);
}

/* ── Layer 2: legacy aliases (theme-independent; they follow layer 1) ── */
:root {
  --bg: var(--cs-bg);   --s: var(--cs-surface);  --e: var(--cs-surface-raised);  --el: var(--cs-surface-float);
  --void: var(--cs-bg); --abyss: var(--cs-bg);   --deep: var(--cs-surface);
  --surface: var(--cs-surface); --elevated: var(--cs-surface-raised); --float: var(--cs-surface-float);

  --t0: var(--cs-text);  --t1: var(--cs-text-2);  --t2: var(--cs-text-muted);  --t3: var(--cs-text-faint);
  --t4: var(--cs-text-faint); --text-4: var(--cs-text-faint); --text-5: var(--cs-text-faint);
  --text-0: var(--cs-text); --text-1: var(--cs-text-2); --text-2: var(--cs-text-muted); --text-3: var(--cs-text-faint);

  --bd0: var(--cs-border-subtle); --bd1: var(--cs-border); --bd2: var(--cs-border-strong);
  --bdc: var(--cs-border); --bdv: var(--cs-border); --bdg: var(--cs-border);
  /* Visual Closure Wave 2 (2026-10-03): --bd/--bd-hi was independently
     redeclared, with measurably drifted opacity values (0.12/0.13/0.14 and
     beyond), across 14 separate pages that otherwise already load this file
     -- the concrete fragmentation example the fresh visual audit cited.
     Added here as one more canonical alias, same convention as --bd0/--bd1/
     --bd2 above, so pages can drop their own copy instead of drifting. */
  --bd: var(--cs-border); --bd-hi: var(--cs-border-strong);

  --green: var(--cs-success); --red: var(--cs-error);
  --gold: var(--cs-accent); --cyan: var(--cs-accent); --purple: var(--cs-accent); --pink: var(--cs-accent);
  --shadow-sm: var(--cs-shadow-sm); --shadow-md: var(--cs-shadow-md); --shadow-lg: var(--cs-shadow-lg);
}

/* Native form controls, scrollbars and autofill follow the theme; the page
   background is set on <html> too so overscroll/transparent surfaces never
   expose the browser default canvas. */
html { background: var(--cs-bg); color: var(--cs-text); }
::placeholder { color: var(--cs-placeholder); opacity: 1; }
:focus-visible { outline: 2px solid var(--cs-focus); outline-offset: 2px; }
::selection { background: var(--cs-selected); }