/* Cyberstrata design tokens — from the Cyberstrata design system specification, v1 (2026-10-10).
   Themes: document (default), document-dark, app, app-dark. Set data-theme on any root element.
   Fonts are served from this site (IBM Plex, SIL Open Font License; see fonts/LICENSE-IBM-Plex.txt),
   so no request leaves for a third-party server. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); }

:root, [data-theme="document"] {
  --ground: var(--gray-100);
  --ground-raised: var(--gray-100);
  --ground-alt: var(--gray-97);
  --ground-inverse: var(--ink);
  --ink: var(--gray-18);
  --ink-2: var(--gray-40);
  --ink-3: var(--gray-52);
  --on-ink: var(--gray-100);
  --on-ink-2: var(--gray-76);
  --line: var(--gray-90);
  --line-strong: var(--gray-62);
  --signal: var(--blue-52);
  --on-signal: var(--gray-100);
  --signal-soft: var(--blue-95);
  --focus: var(--signal);
  --live: var(--signal);
  --critical: var(--red-52);
  --on-critical: var(--gray-100);
  --critical-soft: var(--red-95);
  --warning: var(--amber-80);
  --warning-mark: var(--amber-62);
  --on-warning: var(--gray-18);
  --warning-soft: var(--amber-96);
  --data-1: var(--signal);
  --data-2: var(--ink);
  --data-3: var(--gray-62);
  --data-grid: var(--line);
  --data-axis: var(--line-strong);
  --seq-1: var(--blue-95);
  --seq-2: var(--blue-85);
  --seq-3: var(--blue-74);
  --seq-4: var(--blue-63);
  --seq-5: var(--blue-52);
  --seq-6: var(--blue-40);
  --shadow-float: none;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #2258e5;
}
[data-theme="document-dark"] {
  --ground: var(--gray-18);
  --ground-raised: var(--gray-18);
  --ground-alt: var(--gray-22);
  --ground-inverse: var(--ink);
  --ink: var(--gray-96);
  --ink-2: var(--gray-80);
  --ink-3: var(--gray-66);
  --on-ink: var(--gray-18);
  --on-ink-2: var(--gray-40);
  --line: var(--gray-30);
  --line-strong: var(--gray-56);
  --signal: var(--blue-74);
  --on-signal: var(--gray-18);
  --signal-soft: var(--blue-24);
  --focus: var(--signal);
  --live: var(--signal);
  --critical: var(--red-66);
  --on-critical: var(--gray-18);
  --critical-soft: var(--red-27);
  --warning: var(--amber-80);
  --warning-mark: var(--amber-80);
  --on-warning: var(--gray-18);
  --warning-soft: var(--amber-28);
  --data-1: var(--signal);
  --data-2: var(--ink);
  --data-3: var(--gray-56);
  --data-grid: var(--line);
  --data-axis: var(--line-strong);
  --seq-1: var(--blue-24);
  --seq-2: var(--blue-32);
  --seq-3: var(--blue-40);
  --seq-4: var(--blue-52);
  --seq-5: var(--blue-63);
  --seq-6: var(--blue-74);
  --shadow-float: none;
  --focus-ring: 0 0 0 2px #121212, 0 0 0 4px #81a9fd;
}
[data-theme="app"] {
  --ground: var(--warm-96);
  --ground-raised: var(--warm-99);
  --ground-alt: var(--warm-96);
  --ground-inverse: var(--ink);
  --ink: var(--warm-18);
  --ink-2: var(--warm-40);
  --ink-3: var(--warm-52);
  --on-ink: var(--warm-99);
  --on-ink-2: var(--warm-76);
  --line: var(--warm-90);
  --line-strong: var(--warm-62);
  --signal: var(--blue-52);
  --on-signal: var(--warm-99);
  --signal-soft: var(--blue-95);
  --focus: var(--signal);
  --live: var(--signal);
  --critical: var(--red-52);
  --on-critical: var(--warm-99);
  --critical-soft: var(--red-95);
  --warning: var(--amber-80);
  --warning-mark: var(--amber-62);
  --on-warning: var(--warm-18);
  --warning-soft: var(--amber-96);
  --data-1: var(--signal);
  --data-2: var(--ink);
  --data-3: var(--warm-62);
  --data-grid: var(--line);
  --data-axis: var(--line-strong);
  --seq-1: var(--blue-95);
  --seq-2: var(--blue-85);
  --seq-3: var(--blue-74);
  --seq-4: var(--blue-63);
  --seq-5: var(--blue-52);
  --seq-6: var(--blue-40);
  --shadow-float: 0 8px 24px -12px #14110b40, 0 2px 4px #14110b14;
  --focus-ring: 0 0 0 2px #fdfcf8, 0 0 0 4px #2258e5;
}
[data-theme="app-dark"] {
  --ground: var(--warm-18);
  --ground-raised: var(--warm-22);
  --ground-alt: var(--warm-18);
  --ground-inverse: var(--ink);
  --ink: var(--warm-96);
  --ink-2: var(--warm-80);
  --ink-3: var(--warm-66);
  --on-ink: var(--warm-18);
  --on-ink-2: var(--warm-40);
  --line: var(--warm-30);
  --line-strong: var(--warm-56);
  --signal: var(--blue-74);
  --on-signal: var(--warm-18);
  --signal-soft: var(--blue-24);
  --focus: var(--signal);
  --live: var(--signal);
  --critical: var(--red-66);
  --on-critical: var(--warm-18);
  --critical-soft: var(--red-27);
  --warning: var(--amber-80);
  --warning-mark: var(--amber-80);
  --on-warning: var(--warm-18);
  --warning-soft: var(--amber-28);
  --data-1: var(--signal);
  --data-2: var(--ink);
  --data-3: var(--warm-56);
  --data-grid: var(--line);
  --data-axis: var(--line-strong);
  --seq-1: var(--blue-24);
  --seq-2: var(--blue-32);
  --seq-3: var(--blue-40);
  --seq-4: var(--blue-52);
  --seq-5: var(--blue-63);
  --seq-6: var(--blue-74);
  --shadow-float: 0 8px 24px -8px #000000b3;
  --focus-ring: 0 0 0 2px #1d1a13, 0 0 0 4px #81a9fd;
}
:root {
  /* ramps: measured points, OKLCH lightness in the name; feed the semantic tokens above */
  --gray-100: #ffffff;
  --gray-97: #f5f5f5;
  --gray-96: #f2f2f2;
  --gray-90: #dedede;
  --gray-80: #bebebe;
  --gray-76: #b1b1b1;
  --gray-66: #929292;
  --gray-62: #868686;
  --gray-56: #747474;
  --gray-52: #696969;
  --gray-40: #484848;
  --gray-30: #2e2e2e;
  --gray-22: #1b1b1b;
  --gray-18: #121212;
  --warm-99: #fdfcf8;
  --warm-97: #f7f5f0;
  --warm-96: #f3f2ed;
  --warm-90: #e0ded7;
  --warm-80: #c1bdb4;
  --warm-76: #b5b1a7;
  --warm-66: #969287;
  --warm-62: #8a867a;
  --warm-56: #797468;
  --warm-52: #6d695d;
  --warm-40: #4b473d;
  --warm-30: #312e25;
  --warm-22: #1d1a13;
  --warm-18: #14110b;
  --blue-95: #e6efff;
  --blue-85: #b7cefd;
  --blue-74: #81a9fd;
  --blue-63: #4f82f5;
  --blue-52: #2258e5;
  --blue-40: #0935b1;
  --blue-32: #07277d;
  --blue-24: #06194e;
  --red-95: #ffe9e6;
  --red-66: #e86156;
  --red-52: #be2323;
  --red-27: #3f1916;
  --amber-96: #fff0d9;
  --amber-80: #f2b036;
  --amber-62: #b07b00;
  --amber-28: #35260c;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-none: 0;
  --radius-app: 4px;
  --radius-dot: 50%;
  --control: 40px;
  --control-touch: 48px;
  --target-min: 24px;
  --stroke: 1px;
  --stroke-strong: 2px;
  --marker: 8px;
  --nav: 64px;
  --measure: 68ch;
  --container: 1200px;
  --slide-width: 1280px;
  --slide-height: 720px;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* Type styles (optional helpers). t-label is the Document label voice. */
.t-display { font-family: var(--font-sans); font-size: 64px; line-height: 64px; font-weight: 500; letter-spacing: -0.03em; }
.t-figure-l { font-family: var(--font-sans); font-size: 48px; line-height: 48px; font-weight: 400; letter-spacing: -0.02em; }
.t-headline { font-family: var(--font-sans); font-size: 40px; line-height: 44px; font-weight: 500; letter-spacing: -0.02em; }
.t-figure { font-family: var(--font-sans); font-size: 32px; line-height: 40px; font-weight: 400; letter-spacing: -0.01em; }
.t-title { font-family: var(--font-sans); font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; }
.t-lead { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 400; }
.t-body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.t-small { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.t-code { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 400; }
.t-label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.t-meta { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 400; }