/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — the single source of visual values (Session 01).

   Contract: docs/design-system/04-design-tokens.md + the Session 01 owner
   approval. Enforced by tests/unit/test_design_tokens.py (inventory, exact
   scales, WCAG contrast in both themes, prohibited patterns).

   Rules of this layer:
   - Dark is the authored source of truth; light is the semantic override
     map below — never per-component light styles.
   - Elevation = lightening + hairline. Never blur, glow, gradient, shadow.
   - Certainty states (fact/declared/estimate/missing) are ALIASES of
     semantic colors: meaning must never rely on hue alone — components
     combine them with text, icons, dashing or labels (04, Session 01).
   - No value outside this file may introduce a new color, size, radius or
     duration into the Design System layer. New value = 04 change first.

   INERT in Session 01: loaded globally, consumed by nothing yet.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── surfaces (dark: blue-black canvas, four depth levels) ────────── */
    /* v3 (Cockpit v1.1 §5): the canvas is a deep blue-black, never #000,
       and elevation steps up in luminance. Depth is canvas -> surface ->
       raised -> overlay; nav sits one step BELOW content so chrome never
       out-ranks data (Cockpit §10). */
    --tok-canvas: #090D16;
    --tok-surface: #121927;
    --tok-surface-inset: #0D1320;
    --tok-surface-raised: #182134;
    --tok-surface-nav: #0C111C;
    --tok-surface-selected: #1C2942;
    --tok-surface-overlay: #141C2C;
    /* v2: hairlines are alpha so they keep the SAME relative quietness on
       every surface (Direction C evidence: solid #2A3038 read heavier on
       canvas than on raised surfaces) */
    --tok-line: rgba(150, 178, 235, 0.11);
    --tok-line-strong: rgba(150, 178, 235, 0.22);

    /* ── ink (reading levels + disabled; contrast enforced) ───────────── */
    /* v3 (Cockpit v1.1 §2): --tok-fin is the L3 role — every number a
       decision is actually made on. It exists because the austere v2
       reading used ink-2 as the DEFAULT colour for data, which made grey
       mean "data" instead of "deliberately secondary". Grey is a
       degradation and must be justified; L3 is not grey. */
    --tok-ink: #F2F6FF;
    --tok-fin: #DCE6FA;
    --tok-ink-2: #AFBEDA;
    --tok-ink-muted: #8695B4;
    --tok-ink-disabled: #67748F;

    /* ── interaction (one restrained accent family; never decoration) ── */
    --tok-brand: #4C8DFF;
    --tok-focus: #7DB0FF;
    /* text/icon ink guaranteed legible ON a brand fill (Session 05
       evidence: no existing ink token passes 4.5:1 on brand in both
       themes — dark brand is light, light brand is dark) */
    --tok-ink-on-brand: #061021;

    /* ── semantics (always paired with text/sign — never hue alone) ──── */
    /* v3 (Cockpit v1.1 §3): income and projection are SEPARATE axes.
       Income is not a gain, and a projection is a different KIND of number
       than a record of fact — it must never be mistaken for one. */
    --tok-pos: #2FD48F;
    --tok-warn: #F7B44C;
    --tok-neg: #FF7676;
    --tok-info: #8FA8C7;
    --tok-income: #3FD8E4;
    --tok-projection: #9887FF;
    /* v2: the ONE attention background (L1 attention zone / standalone
       attention statement). A tint of --tok-warn — never a banner fill. */
    --tok-warn-tint: rgba(247, 180, 76, 0.15);
    /* v3: the single ambient light source (Cockpit §5 — one per page, on
       the command strip only). A COLOUR, never a gradient: the token layer
       bans gradients, so composition happens in the Foundation layer. */
    --tok-ambient: rgba(76, 141, 255, 0.13);
    /* v3: constant neutral backing for company identity (Cockpit §7).
       The chip carries the rhythm so a dark, white or red logo all weigh
       the same; without it, real logos regress to the Phase 3 failure. */
    --tok-identity-chip: #F3F6FC;

    /* ── certainty states (aliases: meaning, not new colors) ──────────── */
    --tok-state-fact: var(--tok-ink);
    --tok-state-declared: var(--tok-brand);
    --tok-state-estimate: var(--tok-ink-2);
    --tok-state-missing: var(--tok-ink-muted);

    /* ── categorical chart series (muted; banned outside charts) ─────── */
    --tok-chart-1: #6E9BD8;
    --tok-chart-2: #5FB8A5;
    --tok-chart-3: #C9A45C;
    --tok-chart-4: #C98A7A;
    --tok-chart-5: #8FA8C7;
    --tok-chart-6: #7A9E68;

    /* ── typography (the ONLY 6 sizes; H1 is always type-title) ──────── */
    --tok-type-label-size: 13px;
    --tok-type-label-line: 1.4;
    --tok-type-label-weight: 500;
    --tok-type-body-size: 15px;
    --tok-type-body-line: 1.6;
    --tok-type-body-weight: 400;
    --tok-type-emph-size: 17px;
    --tok-type-emph-line: 1.5;
    --tok-type-emph-weight: 600;
    --tok-type-title-size: 22px;
    --tok-type-title-line: 1.3;
    --tok-type-title-weight: 600;
    /* v2/v3: hero-num IS the display role — the one L1 primary value;
       nothing on a page is larger. v3 (Cockpit §2) raises it so money is
       unambiguously the loudest thing on the screen. */
    --tok-type-hero-num-size: 34px;
    --tok-type-hero-num-line: 1.08;
    --tok-type-hero-num-weight: 660;
    /* v3: the L2 role — the delta ON the answer, always adjacent to L1.
       It cannot reuse type-title: title is a HEADING (1.3 line, 600) and
       giving one token two meanings is exactly what this layer forbids. */
    --tok-type-value-size: 22px;
    --tok-type-value-line: 1.15;
    --tok-type-value-weight: 630;
    /* v2: data role — financial values in collections/tables. Always
       rendered with Inter + tabular-nums (mono numerals retired for data) */
    --tok-type-data-size: 13.5px;
    --tok-type-data-line: 1.45;
    --tok-type-data-weight: 500;
    --tok-type-micro-size: 12px;
    --tok-type-micro-line: 1.4;
    --tok-type-micro-weight: 400;

    /* ── spacing (4px base row; no other gaps exist) ──────────────────── */
    --tok-space-1: 4px;
    --tok-space-2: 8px;
    --tok-space-3: 12px;
    --tok-space-4: 16px;
    --tok-space-5: 24px;
    --tok-space-6: 32px;
    --tok-space-7: 48px;
    --tok-space-8: 64px;

    /* ── radius ───────────────────────────────────────────────────────── */
    /* v2: xs added for small identity chips (monogram) — an 8px radius on
       a 24px box reads as a pill; nothing else may use xs arbitrarily */
    --tok-radius-xs: 4px;
    --tok-radius-s: 8px;
    --tok-radius-m: 12px;
    --tok-radius-l: 16px;

    /* ── density (v2/v3): row targets for the two table modes ─────────── */
    /* v3 (Cockpit §8): density is a feature, but the analytical row also
       carries identity + a sub-line, which does not fit in 38px */
    --tok-row-analytical: 42px;
    --tok-row-tabular: 34px;

    /* ── motion (explains state change; never decorates) ─────────────── */
    --tok-motion-fast: 150ms;
    --tok-motion-normal: 250ms;

    /* ── layering (4 layers are enough) ───────────────────────────────── */
    --tok-z-nav: 100;
    --tok-z-sticky: 200;
    --tok-z-drawer: 300;
    --tok-z-toast: 400;

    /* ── non-visual ───────────────────────────────────────────────────── */
    --tok-touch-min: 44px;
    --tok-reading-max: 68ch;
    --tok-content-max: 1200px;
    --tok-aside-max: 320px;
}

/* ── light theme: the ONE semantic override map (derivation, not new
      palettes; hierarchy and calm must survive the flip) ──────────────── */
html.light-theme {
    /* v3: light is DESIGNED, not derived (Cockpit §15). The canvas is a
       cool tinted white so white content surfaces read as raised, and data
       always sits on the brightest field available. */
    --tok-canvas: #F3F6FC;
    /* default surface sits a step under pure white so the RAISED role keeps
       a measurable foreground in light mode too (Session 03 evidence:
       both were #FFFFFF → roles indistinguishable) */
    --tok-surface: #FBFCFE;
    --tok-surface-inset: #EEF3FB;
    --tok-surface-raised: #FFFFFF;
    --tok-surface-nav: #FFFFFF;
    --tok-surface-selected: #EAF1FE;
    --tok-surface-overlay: #FFFFFF;
    --tok-line: rgba(19, 33, 68, 0.11);
    --tok-line-strong: rgba(19, 33, 68, 0.20);

    /* v3: the light semantics below are DARKER than the Cockpit prototype
       screenshots. The prototype's light inks cleared 4.5:1 on pure white
       but not against the tinted canvas at this layer's floors (ink-2
       requires 7:1). Contrast wins over literal screenshot reproduction —
       Cockpit §16 requires AA in BOTH themes. */
    --tok-ink: #0B1223;
    --tok-fin: #1B2740;
    --tok-ink-2: #414F6B;
    --tok-ink-muted: #5A6883;
    --tok-ink-disabled: #97A3BC;

    --tok-brand: #2563EB;
    --tok-focus: #1D4ED8;
    --tok-ink-on-brand: #FFFFFF;

    --tok-pos: #077A53;
    --tok-warn: #9A5608;
    --tok-neg: #C62F2F;
    --tok-info: #48627F;
    --tok-income: #0B7C8C;
    --tok-projection: #5B4BBF;
    --tok-warn-tint: rgba(154, 86, 8, 0.10);
    --tok-ambient: rgba(37, 99, 235, 0.08);
    --tok-identity-chip: #EEF2F9;

    --tok-chart-1: #3A6BAA;
    --tok-chart-2: #2E8A74;
    --tok-chart-3: #947430;
    --tok-chart-4: #A45F4F;
    --tok-chart-5: #5C748E;
    --tok-chart-6: #4F7440;
}

/* ── reduced motion: everything is instant ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --tok-motion-fast: 0ms;
        --tok-motion-normal: 0ms;
    }
}