/* Yoke design tokens — the single customization surface.
   Both the marketing site and the universe app read these; change a
   value here and every consumer follows. Provisional starting values.

   Three tiers: light defaults, an OS-preference dark override, and
   explicit data-theme overrides so a host can force either theme —
   the host stamps data-theme on the root element and it wins over
   the OS preference in both directions. */
:root {
  --yoke-ink: #14161a;        /* primary mark + text ink (light) */
  --yoke-bg: #ffffff;
  --yoke-muted: #6b7280;
  --yoke-accent: #3b5bdb;     /* provisional accent — change freely */
  --yoke-border: #e5e7eb;
  --yoke-radius: 10px;
  --yoke-font-sans: 'Geist','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --yoke-font-mono: ui-monospace,'SF Mono','JetBrains Mono','Fira Code',monospace;
  /* Derived neutrals — cool-biased, chosen rather than computed. */
  --yoke-surface: #f7f8fb;    /* raised card / sidebar */
  --yoke-surface-2: #eef1f6;  /* toolbars, code, progress chunks */
  --yoke-hover: #f0f2f7;
  --yoke-ink-2: #3b4048;      /* secondary text, one step above muted */
  --yoke-accent-weak: rgba(59, 91, 219, .10);
  --yoke-accent-line: rgba(59, 91, 219, .35);
  --yoke-shadow: 0 1px 2px rgba(20, 22, 26, .05), 0 4px 16px rgba(20, 22, 26, .04);
  /* Semantic state pairs: foreground + tinted background. */
  --yoke-good: #16a34a;  --yoke-good-bg: rgba(22, 163, 74, .12);
  --yoke-warn: #c2740b;  --yoke-warn-bg: rgba(217, 119, 6, .14);
  --yoke-crit: #dc2626;  --yoke-crit-bg: rgba(220, 38, 38, .12);
  --yoke-run: #3b5bdb;   --yoke-run-bg: rgba(59, 91, 219, .12);
  --yoke-idle: #6b7280;  --yoke-idle-bg: rgba(107, 114, 128, .12);
  --yoke-park: #ea580c;  --yoke-park-bg: rgba(234, 88, 12, .12);
  /* Work stages: one tone per Frontier band, shared by band titles and
     graph tiles. Waiting is orange so it reads apart from the neutral On
     hold; red stays a status colour, never a stage. */
  --yoke-stage-waiting: #c2410c;  --yoke-stage-hold: #6b7280;
  --yoke-stage-ready: #0f766e;    --yoke-stage-active: #3b5bdb;
  --yoke-stage-release: #7c3aed;  --yoke-stage-done: #16a34a;
  /* Harness brand marks — theme-invariant, deliberately not overridden
     in dark: a brand color is a fact about the harness, not the theme. */
  --yoke-h-claude: #c8622a;
  --yoke-h-codex: #10a37f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --yoke-ink: #f5f5f5;
    --yoke-bg: #0d0f12;
    --yoke-muted: #9aa1ab;
    --yoke-accent: #6183ff;
    --yoke-border: #22262c;
    --yoke-surface: #14171c;
    --yoke-surface-2: #191d24;
    --yoke-hover: #181c22;
    --yoke-ink-2: #c3c8d1;
    --yoke-accent-weak: rgba(97, 131, 255, .16);
    --yoke-accent-line: rgba(97, 131, 255, .42);
    --yoke-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
    --yoke-good: #3fb950;  --yoke-good-bg: rgba(63, 185, 80, .16);
    --yoke-warn: #d29922;  --yoke-warn-bg: rgba(210, 153, 34, .16);
    --yoke-crit: #f85149;  --yoke-crit-bg: rgba(248, 81, 73, .16);
    --yoke-run: #6183ff;   --yoke-run-bg: rgba(97, 131, 255, .16);
    --yoke-idle: #9aa1ab;  --yoke-idle-bg: rgba(154, 161, 171, .14);
    --yoke-park: #f0883e;  --yoke-park-bg: rgba(240, 136, 62, .16);
    --yoke-stage-waiting: #fb923c;  --yoke-stage-hold: #8b929c;
    --yoke-stage-ready: #2dd4bf;    --yoke-stage-active: #6183ff;
    --yoke-stage-release: #a78bfa;  --yoke-stage-done: #3fb950;
  }
}
:root[data-theme="light"] {
  --yoke-ink: #14161a;
  --yoke-bg: #ffffff;
  --yoke-muted: #6b7280;
  --yoke-accent: #3b5bdb;
  --yoke-border: #e5e7eb;
  --yoke-surface: #f7f8fb;
  --yoke-surface-2: #eef1f6;
  --yoke-hover: #f0f2f7;
  --yoke-ink-2: #3b4048;
  --yoke-accent-weak: rgba(59, 91, 219, .10);
  --yoke-accent-line: rgba(59, 91, 219, .35);
  --yoke-shadow: 0 1px 2px rgba(20, 22, 26, .05), 0 4px 16px rgba(20, 22, 26, .04);
  --yoke-good: #16a34a;  --yoke-good-bg: rgba(22, 163, 74, .12);
  --yoke-warn: #c2740b;  --yoke-warn-bg: rgba(217, 119, 6, .14);
  --yoke-crit: #dc2626;  --yoke-crit-bg: rgba(220, 38, 38, .12);
  --yoke-run: #3b5bdb;   --yoke-run-bg: rgba(59, 91, 219, .12);
  --yoke-idle: #6b7280;  --yoke-idle-bg: rgba(107, 114, 128, .12);
  --yoke-park: #ea580c;  --yoke-park-bg: rgba(234, 88, 12, .12);
  --yoke-stage-waiting: #c2410c;  --yoke-stage-hold: #6b7280;
  --yoke-stage-ready: #0f766e;    --yoke-stage-active: #3b5bdb;
  --yoke-stage-release: #7c3aed;  --yoke-stage-done: #16a34a;
}
:root[data-theme="dark"] {
  --yoke-ink: #f5f5f5;
  --yoke-bg: #0d0f12;
  --yoke-muted: #9aa1ab;
  --yoke-accent: #6183ff;
  --yoke-border: #22262c;
  --yoke-surface: #14171c;
  --yoke-surface-2: #191d24;
  --yoke-hover: #181c22;
  --yoke-ink-2: #c3c8d1;
  --yoke-accent-weak: rgba(97, 131, 255, .16);
  --yoke-accent-line: rgba(97, 131, 255, .42);
  --yoke-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
  --yoke-good: #3fb950;  --yoke-good-bg: rgba(63, 185, 80, .16);
  --yoke-warn: #d29922;  --yoke-warn-bg: rgba(210, 153, 34, .16);
  --yoke-crit: #f85149;  --yoke-crit-bg: rgba(248, 81, 73, .16);
  --yoke-run: #6183ff;   --yoke-run-bg: rgba(97, 131, 255, .16);
  --yoke-idle: #9aa1ab;  --yoke-idle-bg: rgba(154, 161, 171, .14);
  --yoke-park: #f0883e;  --yoke-park-bg: rgba(240, 136, 62, .16);
  --yoke-stage-waiting: #fb923c;  --yoke-stage-hold: #8b929c;
  --yoke-stage-ready: #2dd4bf;    --yoke-stage-active: #6183ff;
  --yoke-stage-release: #a78bfa;  --yoke-stage-done: #3fb950;
}