/* =========================================================================
   Coherence University — design tokens
   Direction 1b, "The Instrument": panel console, spine rail, corner-ticked
   modules. Archivo for prose and UI, JetBrains Mono for identifiers only.

   Colour discipline, from the brief: one accent. Gray carries hierarchy.
   Amber is reserved for a single meaning — "not yet cleared" — so a second
   colour appearing on screen always means something.

   Dark mode note: #1E3A5F on near-black fails contrast, so dark mode lifts the
   accent and the amber to lighter tints of the SAME two hues. The semantics are
   untouched — still one accent plus one reserved state colour.
   ========================================================================= */

:root {
  /* --- the two hues, at source ------------------------------------------ */
  --ink: #0E1116;
  --paper: #FFFFFF;
  --navy: #1E3A5F;
  --amber: #A84D08;

  /* --- surfaces --------------------------------------------------------- */
  --bg: var(--paper);
  --bg-sunk: #F5F6F7;
  --strip-bg: var(--ink);
  --strip-fg: #FFFFFF;
  --strip-fg-dim: rgba(255, 255, 255, .65);

  /* --- text ------------------------------------------------------------- */
  --fg: var(--ink);
  --fg-2: rgba(14, 17, 22, .70);   /* secondary prose */
  --fg-3: rgba(14, 17, 22, .64);   /* micro-labels; WCAG AA on --bg */
  --fg-4: var(--fg-3);            /* sealed content still needs readable text */

  /* --- rules ------------------------------------------------------------ */
  --rule: rgba(14, 17, 22, .15);
  --rule-strong: rgba(14, 17, 22, .25);
  --rule-hair: rgba(14, 17, 22, .10);

  /* --- semantic state --------------------------------------------------- */
  --accent: var(--navy);
  --accent-fg: #FFFFFF;
  --accent-wash: rgba(30, 58, 95, .06);
  --notyet: var(--amber);
  --notyet-wash: rgba(169, 77, 8, .08);

  /* --- live operations room -------------------------------------------- */
  --ops-bg: #080B10;
  --ops-panel: #0D1219;
  --ops-panel-raised: #121923;
  --ops-fg: #F4F7FA;
  --ops-fg-2: rgba(244, 247, 250, .68);
  --ops-fg-3: rgba(244, 247, 250, .58);
  --ops-rule: rgba(244, 247, 250, .13);
  /* Ghost numerals on the dark desk. Large-scale text needs 3:1,
     and --ops-rule (a hairline colour) gives 1.4:1. */
  --ops-fg-ghost: rgba(244, 247, 250, .40);

  /* --- type ------------------------------------------------------------- */
  --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
          Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
          monospace;

  --t-hero: 34px;      /* dossier title */
  --t-title: 26px;
  --t-lede: 17px;
  --t-body: 13.5px;
  --t-row: 12.5px;
  --t-micro: 11px;
  --t-code: 10.5px;    /* mono identifiers */
  --t-label: 9.5px;    /* uppercase micro-labels */

  --track-label: .16em;   /* letter-spacing for micro-labels */
  --track-code: .08em;

  /* --- metrics ---------------------------------------------------------- */
  --rail: 300px;
  --aside: 312px;
  --pad: 26px;
  --gap: 18px;
  --tick: 14px;        /* corner tick length on a module */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1116;
    --bg-sunk: #14181F;
    --strip-bg: #000000;
    --fg: #E6EAF0;
    --fg-2: rgba(230, 234, 240, .72);
    --fg-3: rgba(230, 234, 240, .64);
    --fg-4: var(--fg-3);
    --rule: rgba(230, 234, 240, .16);
    --rule-strong: rgba(230, 234, 240, .28);
    --rule-hair: rgba(230, 234, 240, .10);
    --accent: #7FA6D6;
    --accent-fg: #0E1116;
    --accent-wash: rgba(127, 166, 214, .10);
    --notyet: #E89A47;
    --notyet-wash: rgba(232, 154, 71, .12);
  }
}

/* The viewer's explicit choice wins over the OS hint, in both directions. */
:root[data-theme='dark'] {
  --bg: #0E1116;
  --bg-sunk: #14181F;
  --strip-bg: #000000;
  --fg: #E6EAF0;
  --fg-2: rgba(230, 234, 240, .72);
  --fg-3: rgba(230, 234, 240, .64);
  --fg-4: var(--fg-3);
  --rule: rgba(230, 234, 240, .16);
  --rule-strong: rgba(230, 234, 240, .28);
  --rule-hair: rgba(230, 234, 240, .10);
  --accent: #7FA6D6;
  --accent-fg: #0E1116;
  --accent-wash: rgba(127, 166, 214, .10);
  --notyet: #E89A47;
  --notyet-wash: rgba(232, 154, 71, .12);
}

:root[data-theme='light'] {
  --bg: #FFFFFF;
  --bg-sunk: #F5F6F7;
  --strip-bg: #0E1116;
  --fg: #0E1116;
  --fg-2: rgba(14, 17, 22, .70);
  --fg-3: rgba(14, 17, 22, .64);
  --fg-4: var(--fg-3);
  --rule: rgba(14, 17, 22, .15);
  --rule-strong: rgba(14, 17, 22, .25);
  --rule-hair: rgba(14, 17, 22, .10);
  --accent: #1E3A5F;
  --accent-fg: #FFFFFF;
  --accent-wash: rgba(30, 58, 95, .06);
  --notyet: #A84D08;
  --notyet-wash: rgba(180, 83, 9, .08);
}