/* tokens.css: every custom property of the site. Component CSS reads roles and --c only; it never names a hue.
   Source: design/DESIGN.md section 3. Light theme on :root, dark theme on [data-theme="dark"]. */
:root {
  /* palette, from BRIEF.md, used only through roles and --c */
  --ink:#2E2E2E; --gray:#7D7D7D; --gray-mid:#C7C7C7; --gray-light:#EAEAEA; --panel:#F7F7F7; --white:#FFFFFF; --link:#598DD2;
  --coral:#D95358; --terracotta:#E27553; --blue:#598DD2; --amber:#E09A3B; --teal:#65C2B9; --periwinkle:#8D86E8;
  --forest:#62A16E; --purple:#A37CAD; --gold:#D1B745; --sky:#6FCBEF; --pink:#E072AF; --sand:#C7A678; --slate:#75A4B5;
  /* sections */
  --c-s1:var(--gray); --c-s2:var(--coral); --c-s3:var(--gray); --c-s4:var(--terracotta); --c-s5:var(--blue); --c-s6:var(--amber);
  --c-s7:var(--teal); --c-s8:var(--forest); --c-s9:var(--purple); --c-s10:var(--gray);
  /* operations */
  --c-failures:var(--coral); --c-constrain:var(--terracotta); --c-monitor:var(--blue); --c-intervene:var(--amber);
  --c-steer:var(--teal); --c-train:var(--teal); --c-evaluate:var(--forest); --c-deploy:var(--purple);
  /* attack tiers, polarity, item classes */
  --c-benign:var(--coral); --c-external:var(--amber); --c-insider:var(--purple);
  --c-good:var(--forest); --c-bad:var(--coral); --c-mixed:var(--gold);
  --c-report:var(--sand); --c-verified:var(--slate);
  /* the current colour; attribute selectors below set it, gray when nothing does */
  --c:var(--gray);
  /* roles, light */
  --bg:var(--white); --bg-panel:var(--panel); --fg:var(--ink);
  --fg-muted:color-mix(in srgb, var(--gray) 75%, var(--ink));          /* #696969, 5.49:1 on white, 5.12:1 on panel */
  --rule:var(--gray-light); --rule-strong:var(--gray-mid);
  --link-underline:var(--link); --focus:var(--link); --mark-bg:var(--panel);
  --control-border:var(--gray);                                            /* inputs, buttons, plain chips: 4.12:1 on white, 3.9:1 on panel */
  --tint:14%; --c-text-mix:60%;                                           /* derived colour: see the * block */
  --scrim:rgb(46 46 46 / 0.4); --shadow-float:0 0 0 1px var(--rule-strong), 0 24px 48px -12px rgb(46 46 46 / 0.24);
  /* type */
  --serif:"Newsreader","Newsreader Fallback","Iowan Old Style","Palatino Linotype",Charter,Georgia,serif;
  --sans:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --fs-display:clamp(40px,6vw,72px); --lh-display:1.05;   /* landing title */
  --fs-page:44px; --lh-page:48px;                           /* page titles, section heads */
  --fs-drawer:32px; --lh-drawer:38px;                       /* drawer label */
  --fs-h2:28px; --lh-h2:34px;                               /* subsection and about heads */
  --fs-h3:24px; --lh-h3:30px;                               /* contents rows, month heads */
  --fs-dek:22px; --lh-dek:32px;
  --fs-row-title:20px; --lh-row-title:26px;                 /* ledger titles, map nodes */
  --fs-label:18px; --lh-label:24px;                         /* card labels; purpose text 18/28 */
  --fs-body:16px; --lh-body:24px;                           /* summaries; About essay 18/30 */
  --fs-ui:15px; --lh-ui:21px;                               /* card titles */
  --fs-ui-s:14px; --lh-ui-s:20px;                           /* nav, inputs, rail */
  --fs-meta:13px; --lh-meta:18px;                           /* meta, chips, counts */
  --fs-caps:11px; --lh-caps:16px; --ls-caps:0.08em;         /* small caps */
  --fs-mono-s:12px; --fs-mono-xs:11px;
  /* spacing, 4 px base */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --gutter:24px; --margin:48px; --content-max:1280px; --measure:68ch; --measure-dek:68ch;
  /* shape */
  --r0:0; --r-chip:2px; --r-input:3px; --hairline:1px solid var(--rule); --hairline-strong:1px solid var(--rule-strong); --colour-rule:3px;
  /* layers */
  --z-rail:10; --z-sticky:20; --z-masthead:30; --z-sheet:40; --z-drawer:50; --z-toast:60;
  /* motion */
  --t-hover:120ms; --t-toggle:200ms; --t-drawer:260ms; --ease:cubic-bezier(.2,.7,.2,1);
  /* breakpoints: 390, 768, 1024, 1440 */
  color-scheme: light;
}
[data-theme="dark"] {
  --bg:var(--ink); --bg-panel:color-mix(in srgb, var(--ink) 90%, white);   /* #434343 */
  --fg:var(--gray-light); --fg-muted:var(--gray-mid);                         /* 11.29:1 and 8.03:1 on ink */
  --rule:color-mix(in srgb, var(--gray) 50%, var(--ink)); --rule-strong:var(--gray);
  --link-underline:color-mix(in srgb, var(--link) 75%, white); --focus:color-mix(in srgb, var(--link) 75%, white);  /* #82AADD, 5.65:1 */
  --mark-bg:color-mix(in srgb, var(--ink) 90%, white);
  --control-border:color-mix(in srgb, var(--gray) 75%, white);             /* #9E9E9E, 5.45:1 on ink, 3.88:1 on the dark panel */
  --tint:18%;
  --scrim:rgb(0 0 0 / 0.5); --shadow-float:0 0 0 1px var(--rule-strong), 0 24px 48px -12px rgb(0 0 0 / 0.6);
  color-scheme: dark;
}
/* Derived colours. A custom property that references --c must be declared on the element that carries --c
   (or below it), otherwise it would be computed once at :root with no --c; so these are declared on every
   element and recomputed from the inherited --c. */
*, ::before, ::after {
  --c-tint:color-mix(in srgb, var(--c) var(--tint), var(--bg));
  --c-border:color-mix(in srgb, var(--c) 70%, var(--ink));
  --c-text:color-mix(in srgb, var(--c) var(--c-text-mix), var(--ink));
  --mark-outline:color-mix(in srgb, var(--c) 70%, var(--ink));          /* 1 px on small marks, light only */
}
[data-theme="dark"] *, [data-theme="dark"] ::before, [data-theme="dark"] ::after {
  --c-border:var(--c);
  --c-text:color-mix(in srgb, var(--c) 65%, white);
  --mark-outline:transparent;
}
/* Dark theme, raw hues on the lighter panel surface (#434343) fall under 3:1 (coral 2.51, purple 2.85, gray 2.40):
   marks and dashes inside expanded rows and hovered rows and cards take a lightened outline. */
[data-theme="dark"] :is(.is-expanded, .card:hover, .rail__row:hover, .rail__sub:hover, .toc__row:hover) *,
[data-theme="dark"] :is(.is-expanded, .card:hover, .rail__row:hover, .rail__sub:hover, .toc__row:hover) ::before {
  --mark-outline:color-mix(in srgb, var(--c) 55%, white);
}
/* --c from data attributes: one rule per identity */
[data-section="s1"]{--c:var(--c-s1)} [data-section="s2"]{--c:var(--c-s2)} [data-section="s3"]{--c:var(--c-s3)} [data-section="s4"]{--c:var(--c-s4)}
[data-section="s5"]{--c:var(--c-s5)} [data-section="s6"]{--c:var(--c-s6)} [data-section="s7"]{--c:var(--c-s7)} [data-section="s8"]{--c:var(--c-s8)}
[data-section="s9"]{--c:var(--c-s9)} [data-section="s10"]{--c:var(--c-s10)}
[data-op="failures"]{--c:var(--c-failures)} [data-op="constrain"]{--c:var(--c-constrain)} [data-op="monitor"]{--c:var(--c-monitor)}
[data-op="intervene"]{--c:var(--c-intervene)} [data-op="steer"]{--c:var(--c-steer)} [data-op="train"]{--c:var(--c-train)}
[data-op="evaluate"]{--c:var(--c-evaluate)} [data-op="deploy"]{--c:var(--c-deploy)}
[data-source="benign"]{--c:var(--c-benign)} [data-source="external"]{--c:var(--c-external)} [data-source="insider"]{--c:var(--c-insider)}
[data-polarity="good"]{--c:var(--c-good)} [data-polarity="bad"]{--c:var(--c-bad)} [data-polarity="mixed"]{--c:var(--c-mixed)}
[data-c="report"]{--c:var(--c-report)} [data-c="verified"]{--c:var(--c-verified)} [data-c="gray"]{--c:var(--gray)} [data-c="fg"]{--c:var(--fg)}
[data-section="s6"],[data-op="intervene"],[data-source="external"],[data-section="s7"],[data-op="steer"],[data-op="train"],[data-polarity="mixed"],[data-c="report"] { --c-text-mix:50%; }
@media (prefers-reduced-motion: reduce) { :root { --t-hover:0ms; --t-toggle:0ms; --t-drawer:0ms; } }