/* Cornerstone Sales Academy — Field Instrument design tokens.
 * Source of truth: C:\CornerstoneNight\night\DESIGN.md §2–§6.
 *
 * This is the only file under web/styles/ allowed to contain a raw hex
 * value. Every other stylesheet and every inline style must reference
 * var(--token). The §2.5 legacy aliases keep every pre-V1 --name
 * resolving so index.html and login.html need no other edits yet.
 *
 * SCOPE, V1 (Brey's decision, 19:15): this file ships LIGHT-ONLY. Every
 * dark token below is defined, but it hangs off an inert
 * :root[data-theme="dark"] selector — prefers-color-scheme is NOT wired
 * up here. Reason: web/index.html still carries 84 literal hexes and
 * pairs literal backgrounds with token foregrounds, so flipping --text
 * would put #E6EDF7 on a literal #fff (~1.18:1) across 28 rules. Item
 * V2b converts those literals and switches this one selector over to
 * `@media (prefers-color-scheme: dark)`; no value here changes then.
 */

:root {
  /* 2.1 Surfaces, ink and structure — light */
  --bg: #F3F6FB;
  --surface: #FFFFFF;
  --surface-2: #E9EEF6;
  --surface-call: #102443;
  --text: #0D1B30;
  --text-muted: #56637A;
  --border: #D3DBE7;
  --border-strong: #6E7F9B;
  --brand: #102443;
  --brand-ink: #FFFFFF;
  --accent: #1F3864;
  --accent-ink: #FFFFFF;
  --focus: #2F6FEB;

  /* 2.3 Status colours (system state, never provenance) — light */
  --success: #176B42; --success-bg: #E9F6EF;
  --warning: #8A5A13; --warning-bg: #FFF5DF;
  --danger:  #9C2626; --danger-bg:  #FDECEC;
  --info:    #1554A3; --info-bg:    #EAF2FD;
  --neutral: #5A6880; --neutral-bg: #EDF0F5;

  /* 2.4 Bar fills on --surface-2 track. Each state reuses its matching
     §2.3 status token — the hex values are identical (see DESIGN.md
     §2.4), so aliasing keeps a single source of truth and follows the
     light/dark scheme automatically. */
  --bar-full: var(--success);
  --bar-partial: var(--warning);
  --bar-low: var(--danger);
  --bar-unscored: var(--neutral);

  /* 4. Type — system stack only, "Inter" dropped */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Seven sizes, as `font-weight font-size/line-height`. Consumers append
     var(--font): e.g. font: var(--t-body) var(--font); */
  --t-display: 700 40px/44px;
  --t-title: 700 24px/30px;
  --t-heading: 600 20px/26px;
  --t-subhead: 600 17px/24px;
  --t-body: 400 16px/24px;
  --t-meta: 400 14px/20px;
  --t-label: 700 12px/16px;

  /* 5. Space — 4px grid */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* 5. Shape — three radii */
  --r-control: 8px;
  --r-card: 14px;
  --r-pill: 999px;

  /* 5. Elevation — two shadow levels */
  --shadow-1: 0 1px 2px rgb(16 36 67 / 8%), 0 1px 1px rgb(16 36 67 / 4%);
  --shadow-2: 0 10px 28px rgb(16 36 67 / 16%), 0 2px 6px rgb(16 36 67 / 8%);

  /* 6. Motion */
  --dur-state: 120ms; --ease-state: cubic-bezier(.2,0,.2,1);
  --dur-enter: 240ms; --ease-enter: cubic-bezier(.16,1,.3,1);

  /* 2.5 Legacy aliases — every --name web/index.html and web/login.html
     referenced pre-V1 stays resolvable so no other file needs editing
     to keep rendering. */
  --paper: var(--bg);
  --card:  var(--surface);
  --line:  var(--border);
  --ink:   var(--text);
  --muted: var(--text-muted);
  --navy:  var(--brand);
  --navy2: var(--accent);

  /* §3 FROZEN — provenance badge hues. Written as literal values, not
     aliases, per §2.5, so no future token edit can move them. These ten
     pairs (eight badge classes + two approval tags reusing two of them)
     must render identically in light and dark mode: see the dark set
     below, which deliberately does NOT redefine any of these six names. */
  --green:  #176B42; --green-bg:  #E9F6EF;
  --blue:   #1554A3; --blue-bg:   #EAF2FD;
  --amber:  #8A5A13; --amber-bg:  #FFF5DF;
  --purple: #6C3DB4; --purple-bg: #F2EBFF;
  --orange: #9B4B0C; --orange-bg: #FFF0E2;
  --red:    #9C2626; --red-bg:    #FDECEC;
}

/* Dark set — defined, not yet activated (see SCOPE above). V2b swaps this
   one selector for `@media (prefers-color-scheme: dark) { :root { ... } }`
   once web/index.html's literals are on tokens. The values are final; only
   the selector is provisional. */
:root[data-theme="dark"] {
    --bg: #0A1424;
    --surface: #101E33;
    --surface-2: #17273E;
    --surface-call: #0A1424;
    --text: #E6EDF7;
    --text-muted: #9FAEC6;
    --border: #26354F;
    --border-strong: #6579A0;
    --brand: #102443;
    --brand-ink: #E6EDF7;
    --accent: #8FB0EA;
    --accent-ink: #0A1424;
    --focus: #8FB4F5;

    --success: #5CCB91; --success-bg: #13301F;
    --warning: #E7B35A; --warning-bg: #33260D;
    --danger:  #F08A8A; --danger-bg:  #3A1717;
    --info:    #8AB6F2; --info-bg:    #122A45;
    --neutral: #9FAEC6; --neutral-bg: #1B2942;

    /* --green/--blue/--amber/--purple/--orange/--red and their -bg
       partners are intentionally absent here — §3 requires the frozen
       provenance pairs to keep their exact light values in dark mode.
       --paper/--card/--line/--ink/--muted/--navy/--navy2 need no dark
       override either: they alias --bg/--surface/--border/--text/
       --text-muted/--brand/--accent above, which follow this block once
       it is activated. */
}

[data-surface="navy"] {
  /* §2.2 / §9.2: header, rail and the live-call shell always read the
     dark-mode ring against navy (7.39:1) regardless of colour scheme. */
  --focus: #8FB4F5;
}

/* §2.2 ring recipe. tokens.css owns no markup, so this cannot rely on
   winning a specificity fight with a future component rule — the bare
   :focus-visible is backed by an explicit element list (also matching
   §2.2's fallback-friendly var(--focus,#2F6FEB) already used in
   web/stage-tabs.js, web/canonical-integration.js, web/local-ai.js) so
   every interactive element gets a visible ring with no exceptions.
   AMENDED 2026-09-23 00:0x by the operator (DESIGN.md §2.2): the bare
   :focus-visible below must declare NO border-radius of any kind. Its
   specificity (0,1,0) outranks nav button (0,0,2), textarea (0,0,1) and
   select (0,0,1), so a border-radius here overrode their own radii and
   squared off every focused control — the 999px round mic included.
   border-radius: inherit also takes the *parent's* radius, almost always
   0, so it never did what it read as doing. It was never needed either
   way: an outline already follows the element's own border-radius
   natively in every browser we target, with no CSS required. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* §6 Motion — reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}