/* ============================================================
   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; } }