/**
 * SIOR Global Practices — Design Tokens (DESIGN-1)
 *
 * The tokenised design system. Layered:
 *
 *   1. PRIMITIVES  (--dt-*)  — raw values with names. NEVER used directly by
 *      components; consumed only by the semantic layer. Sourced from the
 *      values the shipped UI actually renders (audit 2026-09-02), so adoption
 *      is zero-visual-change.
 *
 *   2. SEMANTIC    (--surface-*, --text-*, --border-*, --state-*) — the
 *      vocabulary components use. Defined once per theme: :root is DARK
 *      (default), retargeted under [data-theme="light"]. The single place a
 *      theme change touches.
 *
 *   3. COMPONENT   (--rd-*, --grade-*) — aliases the redesign shell and grade
 *      pills already consume, re-pointed at the semantic layer.
 *
 * Relationship to the LOCKED brand palette (src/css/brand-tokens.css):
 *   brand-tokens is the BRAND layer and stays untouched — the six locked
 *   colours plus AA text variants and the type/breakpoint scales. This file
 *   REFERENCES those tokens (var(--sior-*)) but never redefines them
 *   (tests/design-tokens.spec.js enforces layer separation, and
 *   tests/brand-tokens.spec.js keeps the palette in sync with lib/brand.js).
 *
 * JS mirrors (kept in sync manually, by contract):
 *   - src/js/lib/brand.js        BRAND_HEX / BRAND_RGB (locked palette)
 *   - src/js/globe.js            METRIC_COLORS (globe point + trend colours)
 *   - src/js/pdf-export.js       PDF grade palette (deliberately differs —
 *                                A cyan / B sky / C blue / D orange; see
 *                                AGENTS.md "Grade colors")
 *
 * Loaded from index.html AFTER brand-tokens.css and BEFORE styles.css.
 */

:root {
  /* ── 1. PRIMITIVES — neutrals (the shipped surface ramp) ──────────────── */
  --dt-ink-950: #0b1322; /* deepest ink: page voids, footer wells            */
  --dt-ink-900: #15203a; /* raised dark panels                               */
  --dt-ink-800: #1a2330; /* light-theme body text; dark chip text            */
  --dt-ink-700: #4a5a6a; /* light-theme muted text                           */
  --dt-mist-25: #f4f6fb; /* light page canvas                                */
  --dt-mist-50: #eef2f8; /* light section canvas / redesign light bg         */
  --dt-mist-100: #e8eef7; /* light raised surface                            */

  /* Status hues (currently one-off literals; see Design-Audit.md F2) */
  --dt-success-600: #28a745;
  --dt-success-50: #e8f5e9;
  --dt-success-ink: #e6f2eb;
  --dt-danger-600: #dc3545;
  --dt-info-50: #e3f2fd;
  --dt-warn-50: #fff8e1;
  --dt-warn-100: #fff3e0;
  --dt-warn-ink: #5c4000;
  --dt-warn-wash-a: #fbe9e5;
  --dt-warn-wash-b: #faf1d9;

  /* Globe fallback gray (globe.js METRIC_COLORS fallback #6b7280) */
  --dt-neutral-500: #6b7280;

  /* ── 2. SEMANTIC — dark theme is the default ──────────────────────────── */
  --surface-canvas: var(--sior-navy);      /* page background               */
  --surface-page: var(--dt-ink-950);       /* deepest voids / footer wells  */
  --surface-raised: var(--dt-ink-900);     /* cards / panels on canvas      */
  --surface-inset: rgb(10 22 40 / 0.5);    /* recessed chips, inputs        */
  --text-primary: rgb(231 238 247);        /* body text on dark             */
  --text-muted: rgb(155 176 200);          /* secondary text on dark        */
  --border-strong: rgb(255 255 255 / 0.15);
  --border-soft: rgb(255 255 255 / 0.08);
  --hover-wash: rgb(255 255 255 / 0.06);
  --accent: var(--sior-cyan);
  --accent-hover: var(--sior-sky);
  --link: var(--sior-cyan);
  --focus-ring: var(--sior-cyan);
  --state-success: var(--dt-success-600);
  --state-danger: var(--dt-danger-600);
  --state-warning: var(--dt-warn-ink);
}

:root[data-theme="light"] {
  --surface-canvas: var(--dt-mist-25);
  --surface-page: var(--dt-mist-50);
  --surface-raised: #ffffff;
  --surface-inset: rgba(26, 36, 41, 0.05);
  --text-primary: var(--dt-ink-800);
  --text-muted: var(--dt-ink-700);
  --border-strong: rgba(26, 36, 41, 0.16);
  --border-soft: rgba(26, 36, 41, 0.08);
  --hover-wash: rgba(26, 36, 41, 0.05);
  /* AA on white: cyan fails at 2.7:1, so light themes link in --sior-blue
     (4.5:1+) — matches the A11Y-1 decision recorded in brand-tokens.css. */
  --accent: var(--sior-blue);
  --accent-hover: var(--sior-cyan-text);
  --link: var(--sior-blue);
  /* SWARM THEME-4: cyan focus rings are 2.7:1 on light surfaces — below the
     3:1 non-text floor (WCAG 1.4.11). Blue rings stay on-brand and pass. */
  --focus-ring: var(--sior-blue);
}