/* ============================================================
   Chronocide brand theme — override layer for the presentation deck
   Loaded AFTER each page's inline <style>, so it re-skins the pages
   onto the "Kinetic Light" design system (Space Grotesk + JetBrains
   Mono, industrial orange, machined-grid surface) by remapping the
   CSS custom properties the pages already use.
   ============================================================ */

:root {
  /* Typography — the site system */
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Neutral surfaces & ink (Kinetic Light) */
  --paper: #f9f9f9;
  --card: #ffffff;
  --ink: #1a1c1c;
  --muted: #534433;
  --faint: #867461;
  --line: #e0d6c6;
  --line-strong: #c9b59d;
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 30px rgba(132, 84, 0, .06);

  /* Primary brand accent — industrial orange */
  --accent: #8a5a00;
  --accent-2: #a06a00;
  --accent-soft: #ffe6c2;

  /* Role accents collapsed onto three on-brand tones:
     orange (primary), warm taupe (outline), cool grey (secondary) */
  --pubert: #8a5a00;        --pubert-soft: #ffe6c2;   /* orange */
  --simon: #8a5a00;         --simon-soft: #ffe6c2;    /* orange (gateway) */
  --simon2: #7a6a54;        --simon2-soft: #ece1d1;   /* warm taupe */
  --ratchet: #7a6a54;       --ratchet-soft: #ece1d1;  /* warm taupe */
  --agent: #7a6a54;         --agent-soft: #ece1d1;    /* warm taupe */
  --eval: #7a6a54;          --eval-soft: #ece1d1;     /* warm taupe */
  --blue: #5f5e5e;          --blue-soft: #e2dfde;     /* cool grey */

  /* Other one-off brand-ish accents → orange */
  --remote: #8a5a00;        --remote-soft: #ffe6c2;
  --setup: #8a5a00;         --setup-soft: #ffe6c2;
  --oxen: #8a5a00;          --oxen-soft: #ffe6c2;
  --idea: #8a5a00;          --idea-soft: #ffe6c2;
  --flow: #8a5a00;          --flow-soft: #ffe6c2;
  --ai: #8a5a00;            --ai-soft: #ffe6c2;
  --access: #8a5a00;        --access-soft: #ffe6c2;
  --tweak: #8a5a00;         --tweak-soft: #ffe6c2;

  /* Semantic status — kept distinct but on-palette */
  --ok: #2f6d4b;            --ok-soft: #deeee4;       /* green (positive) */
  --green: #2f6d4b;         --green-soft: #deeee4;
  --dev: #2f6d4b;           --dev-soft: #deeee4;
  --warn: #a9761f;          --warn-soft: #f4ecd6;     /* amber (caution) */
  --stop: #ba1a1a;          --stop-soft: #ffdad6;     /* red (negative) */
  --issue: #ba1a1a;         --issue-soft: #ffdad6;
  --risk: #ba1a1a;          --risk-soft: #ffdad6;
  --alert: #ba1a1a;         --alert-soft: #ffdad6;
}

/* Machined-grid surface — override the pages' literal body gradients */
body {
  background-color: #f9f9f9 !important;
  background-image:
    linear-gradient(to right, rgba(216, 195, 173, .13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(216, 195, 173, .13) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  font-family: var(--font-sans) !important;
}

/* Display type in the site voice */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}

code, pre, kbd, samp { font-family: var(--font-mono); }

::selection { background: #f49e00; color: #603b00; }

/* Force the brand's light look even for dark-mode viewers, so the deck
   stays consistent with the (light-only) Chronocide site. */
@media (prefers-color-scheme: dark) {
  body { background-color: #f9f9f9 !important; color: var(--ink) !important; }
}