/* ============================================================
   taste direction: tech
   Tech: dark-first product surface, one sharp accent, mono only for labels and figures, visible grid.
   A STARTING POINT, not the answer: re-derive the hues from the
   client's subject (references/brief.md) and keep the roles.
   Load after design-foundations/css/foundation.css. The dark remap
   sits under @media screen so print always resolves the light theme.
   Check every text pair after re-tuning:
   python3 scripts/check_contrast.py templates/directions/<file>.css
   ============================================================ */

:root {
  --font-display: "Onest", "Onest", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Onest", "Geologica", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --w-display: 600;
  --tr-display: -0.03em;
  --tr-h2: -0.025em;
  --lh-display: 1;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-button: 8px;
  --case-eyebrow: uppercase;
  --tr-eyebrow: 0.08em;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eceff3;
  --ink: #0b0d12;
  --muted-strong: #353b47;
  --muted: #555d6b;
  --line: #dfe3ea;
  --line-strong: #c5cbd5;
  --ink-field: #0b0d12;
  --on-ink: #eef1f6;
  --on-ink-muted: #aab2c0;
  --accent: #166534;
  --accent-fill: #166534;
  --accent-on-fill: #ffffff;
  --accent-text: #166534;
  --accent-soft: #e3f1e8;
  --field-1: #eceff3;
  --field-1-ink: #0b0d12;
  --field-2: #e3f1e8;
  --field-2-ink: #0b0d12;
  --field-3: #0b0d12;
  --field-3-ink: #eef1f6;
  color-scheme: light dark;
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0d12;
    --surface: #12151c;
    --surface-2: #171b24;
    --ink: #eef1f6;
    --muted-strong: #c6ccd8;
    --muted: #97a0b0;
    --line: rgba(238, 241, 246, 0.09);
    --line-strong: rgba(238, 241, 246, 0.18);
    --ink-field: #05060a;
    --on-ink: #eef1f6;
    --on-ink-muted: #a3acbb;
    --accent: #86efac;
    --accent-fill: #86efac;
    --accent-on-fill: #0b0d12;
    --accent-text: #86efac;
    --accent-soft: rgba(134, 239, 172, 0.14);
    --field-1: #171b24;
    --field-1-ink: #eef1f6;
    --field-2: #122c20;
    --field-2-ink: #eef1f6;
    --field-3: #05060a;
    --field-3-ink: #eef1f6;
  }
}
@media screen {
  :root[data-theme="dark"] {
    --bg: #0b0d12;
    --surface: #12151c;
    --surface-2: #171b24;
    --ink: #eef1f6;
    --muted-strong: #c6ccd8;
    --muted: #97a0b0;
    --line: rgba(238, 241, 246, 0.09);
    --line-strong: rgba(238, 241, 246, 0.18);
    --ink-field: #05060a;
    --on-ink: #eef1f6;
    --on-ink-muted: #a3acbb;
    --accent: #86efac;
    --accent-fill: #86efac;
    --accent-on-fill: #0b0d12;
    --accent-text: #86efac;
    --accent-soft: rgba(134, 239, 172, 0.14);
    --field-1: #171b24;
    --field-1-ink: #eef1f6;
    --field-2: #122c20;
    --field-2-ink: #eef1f6;
    --field-3: #05060a;
    --field-3-ink: #eef1f6;
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
}

/* signature */
.eyebrow, .label, .num, .facts strong { font-family: var(--font-mono); }
.facts strong { letter-spacing: -0.04em; }

:root { --red: #a92127; --yellow: #795000; --green: #166534; --office-wall: #b9d3c7; --office-floor: #c2a67d; --office-wood: #755536; --office-screen: #152d28; --office-glow: #86efac; --office-skin: #ebae83; --office-blue: #385a86; --office-purple: #735582; --office-white: #f4ead9; --shadow: rgba(0,0,0,.13); }
@media screen { :root[data-theme="dark"] { --red: #ff9da2; --yellow: #f8d174; --green: #86efac; } }
@media screen and (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --red: #ff9da2; --yellow: #f8d174; --green: #86efac; } }

/* Game palette: sage office walls, taxi sign, desk paper and night sky. */
:root { --game-ground: #e6e9dd; --game-night: rgba(15,26,57,.44); --game-taxi: #efd077; --game-sticky-handle: #d8b75e; --game-ink: #242d2b; --game-paper: #fff8e8; --game-sage: #537c62; --game-rose: #a85963; }
@media screen { :root[data-theme="dark"] { --game-ground: #202a30; } }
@media screen and (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --game-ground: #202a30; } }
:root { --game-pin-red: #992629; --game-pin-yellow: #745600; --game-pin-green: #23633a; }
/* Dispatch game: paper HUD, graphite pixel frames, timber room, chair blue. */
:root{--font-game:'Dispatch Pixel',ui-monospace,monospace;--game-ground:#e8e2d5;--game-hud:#fff8e8;--game-ui-ink:#2b343b;--game-ui-muted:#515b60;--game-frame:#9b886c;--game-control:#eadfc9;--game-control-hover:#dfcfb2;--game-focus:#1e6351;--game-sign-ink:#f5f1e7;--game-hit-hover:rgba(255,255,255,.15)}
@media screen{:root[data-theme='dark']{--game-ground:#22252b;--game-hud:#2e333b;--game-ui-ink:#f5ebd9;--game-ui-muted:#c6c0b5;--game-frame:#645748;--game-control:#41464e;--game-control-hover:#4e545e;--game-focus:#b9d0a4}}
@media screen and (prefers-color-scheme:dark){:root:not([data-theme='light']){--game-ground:#22252b;--game-hud:#2e333b;--game-ui-ink:#f5ebd9;--game-ui-muted:#c6c0b5;--game-frame:#645748;--game-control:#41464e;--game-control-hover:#4e545e;--game-focus:#b9d0a4}}
/* The editor grid uses the office plant tint. */
:root{--game-grid:rgba(30,99,81,.2)}
@media screen{:root[data-theme='dark']{--game-grid:rgba(185,208,164,.2)}}

/* Employee references: ledger paper, timber, charcoal and coloured window enamel. */
:root{--work-paper:#fff5df;--work-paper-deep:#efe0c5;--work-ink:#242528;--work-muted:#5b5044;--work-wood:#aa814e;--work-edge:#292729;--work-highlight:#fff8e8;--work-navy:#27447c;--work-amber:#9a4b12;--work-blue:#245d9b;--work-green:#236a32;--work-red:#a72e2e;--work-violet:#633da2;--work-title-ink:#fff8e8;--work-input:#fffdf7;--work-input-edge:#697883;--work-ghost:#c4b49a;--work-signal-red:#ba3337;--work-signal-yellow:#d39b28;--work-signal-green:#388242;--work-signal-blue:#245d9b}
@media screen{:root[data-theme='dark']{--work-paper:#302d29;--work-paper-deep:#403b33;--work-ink:#fff1d8;--work-muted:#d0c1ac;--work-wood:#79613f;--work-highlight:#8b7963;--work-input:#24272c;--work-input-edge:#8d9ba5;--work-ghost:#8c7d68}}
@media screen and (prefers-color-scheme:dark){:root:not([data-theme='light']){--work-paper:#302d29;--work-paper-deep:#403b33;--work-ink:#fff1d8;--work-muted:#d0c1ac;--work-wood:#79613f;--work-highlight:#8b7963;--work-input:#24272c;--work-input-edge:#8d9ba5;--work-ghost:#8c7d68}}

:root{--ava-gap:.75rem;--ava-space:1.5rem}