/* Digital Mirror — generated from tokens.json */
:root, [data-theme="dark"] {
  --void: #0a0d12;
  --surface: #11151c;
  --surface-raised: #171c26;
  --scrim: #0a0d12e6;
  --ink: #e9edf3;
  --ink-muted: #9aa5b5;
  --ink-faint: #76839a;
  --edge: #222a38;
  --edge-strong: #58677f;
  --signal: #ff4257;
  --on-signal: #10131a;
  --signal-tint: #ff425726;
  --signal-tint-edge: #ff425759;
  --secure: #3ddc97;
  --on-secure: #0a0d12;
  --secure-tint: #3ddc9726;
  --secure-tint-edge: #3ddc9759;
  --warn: #ffb224;
  --accent: #5ad0e6;
  --accent-tint: #5ad0e626;
  --accent-tint-edge: #5ad0e659;
  --score-critical: var(--signal);
  --score-high: #ff8a3d;
  --score-medium: var(--warn);
  --score-low: var(--secure);
  --scanline: #ffffff08;
  --shadow-card: 0 1px 0 #ffffff0d inset, 0 8px 24px #00000066;
  --shadow-pop: 0 1px 0 #ffffff14 inset, 0 16px 48px #000000a6;
  --glow-signal: 0 0 0 1px #ff425740, 0 0 32px #ff42573d;
  --glow-secure: 0 0 0 1px #3ddc9740, 0 0 32px #3ddc9733;
}
[data-theme="light"] {
  --void: #ffffff;
  --surface: #ffffff;
  --surface-raised: #f7f9fc;
  --scrim: #ffffffe6;
  --ink: #141a23;
  --ink-muted: #4c5868;
  --ink-faint: #5f6b7e;
  --edge: #dde3ec;
  --edge-strong: #8b99ad;
  --signal: #c81e30;
  --on-signal: #ffffff;
  --signal-tint: #c81e301a;
  --signal-tint-edge: #c81e304d;
  --secure: #0b7a55;
  --on-secure: #ffffff;
  --secure-tint: #0b7a551a;
  --secure-tint-edge: #0b7a554d;
  --warn: #8f5400;
  --accent: #0b7285;
  --accent-tint: #0b72851a;
  --accent-tint-edge: #0b72854d;
  --score-critical: var(--signal);
  --score-high: #b4440c;
  --score-medium: var(--warn);
  --score-low: var(--secure);
  --scanline: #141a2308;
  --shadow-card: 0 1px 2px #141a2314, 0 8px 24px #141a2314;
  --shadow-pop: 0 2px 4px #141a231f, 0 16px 48px #141a2329;
  --glow-signal: 0 0 0 1px #c81e3040, 0 8px 24px #c81e3026;
  --glow-secure: 0 0 0 1px #0b7a5540, 0 8px 24px #0b7a5526;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --font-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.display-xl { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -0.02em; }
.display-lg { font-family: var(--font-display); font-size: 38px; line-height: 44px; font-weight: 700; letter-spacing: -0.015em; }
.display-md { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.title { font-family: var(--font-sans); font-size: 19px; line-height: 26px; font-weight: 600; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.data-xl { font-family: var(--font-mono); font-size: 64px; line-height: 64px; font-weight: 600; }
.data-lg { font-family: var(--font-mono); font-size: 24px; line-height: 32px; font-weight: 500; }
.data { font-family: var(--font-mono); font-size: 15px; line-height: 24px; font-weight: 500; }
.data-sm { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 500; }
.label { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.1em; }