:root, [data-theme="night"] {
  --ground: #060915;
  --surface: #0d1326;
  --surface-raised: #141c36;
  --surface-inset: #090e1e;
  --surface-hover: #1a2342;
  --line: #202b4e;
  --line-strong: #5c6aa2;
  --grid: #141c33;
  --ink: #edf1ff;
  --ink-muted: #a3afd0;
  --ink-faint: #7381ac;
  --arc: #29e0f5;
  --arc-ink: #021118;
  --arc-text: #5fe6f7;
  --arc-soft: #0a2c38;
  --arc-line: #2a7288;
  --pulse: #ff3d9e;
  --pulse-ink: #1b0111;
  --pulse-text: #ff8fc8;
  --pulse-soft: #30081f;
  --ok: #2bd99b;
  --ok-text: #55e8b0;
  --ok-soft: #062c21;
  --warn: #ffc74d;
  --warn-text: #ffd87a;
  --warn-soft: #2f2408;
  --danger: #ff6b81;
  --danger-text: #ffa3b1;
  --danger-soft: #31101a;
  --on-status: #060915;
  --focus: #7fe9ff;
  --overlay: rgba(3, 6, 15, 0.78);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 32px 72px rgba(0, 0, 0, 0.62);
  --shadow-arc: 0 14px 44px rgba(41, 224, 245, 0.3);
  --shadow-pulse: 0 14px 44px rgba(255, 61, 158, 0.26);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="day"] {
  --ground: #f4f6fc;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-inset: #edf1f9;
  --surface-hover: #e7ecf7;
  --line: #dce2f0;
  --line-strong: #737d9a;
  --grid: #e4e9f4;
  --ink: #0a1020;
  --ink-muted: #4e587a;
  --ink-faint: #6d7692;
  --arc: #0e7490;
  --arc-ink: #ffffff;
  --arc-text: #0a6379;
  --arc-soft: #dff6fb;
  --arc-line: #7cc9dc;
  --pulse: #c2166f;
  --pulse-ink: #ffffff;
  --pulse-text: #a81060;
  --pulse-soft: #fce7f3;
  --ok: #047857;
  --ok-text: #036a4c;
  --ok-soft: #d8f8e8;
  --warn: #a85b06;
  --warn-text: #8a4b05;
  --warn-soft: #fef1d6;
  --danger: #c8102e;
  --danger-text: #ae0d28;
  --danger-soft: #ffe3e7;
  --on-status: #ffffff;
  --focus: #0b5fb0;
  --overlay: rgba(10, 16, 32, 0.5);
  --shadow-sm: 0 1px 2px rgba(16, 24, 48, 0.08);
  --shadow-md: 0 10px 30px rgba(16, 24, 48, 0.1);
  --shadow-lg: 0 32px 72px rgba(16, 24, 48, 0.18);
  --shadow-arc: 0 10px 30px rgba(14, 116, 144, 0.28);
  --shadow-pulse: 0 10px 30px rgba(194, 22, 111, 0.22);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 112px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-sans: "Onest", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}
.display-hero { font-family: var(--font-display); font-size: 72px; line-height: 66px; font-weight: 800; letter-spacing: -0.035em; }
.display-xl { font-family: var(--font-display); font-size: 48px; line-height: 48px; font-weight: 800; letter-spacing: -0.03em; }
.display-lg { font-family: var(--font-display); font-size: 34px; line-height: 38px; font-weight: 700; letter-spacing: -0.02em; }
.title-lg { font-family: var(--font-sans); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; }
.title-md { font-family: var(--font-sans); font-size: 19px; line-height: 26px; font-weight: 600; }
.body-lg { font-family: var(--font-sans); font-size: 17px; line-height: 27px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 15px; line-height: 23px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 13px; line-height: 19px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.01em; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; }
.numeral-xl { font-family: var(--font-mono); font-size: 40px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; }
.numeral { font-family: var(--font-mono); font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.code { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.06em; }
.eyebrow { font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.18em; }

/* ARCSHOP compatibility aliases — visual only, legacy JS names remain intact. */
:root, [data-theme="night"], [data-theme="day"] {
  --void: var(--ground);
  --panel: var(--surface);
  --raised: var(--surface-raised);
  --inset: var(--surface-inset);
  --ink-mid: var(--ink-muted);
  --ink-low: var(--ink-faint);
  --accent: var(--arc);
  --accent-deep: var(--arc-text);
  --accent-soft: var(--arc-soft);
  --on-accent: var(--arc-ink);
  --critical: var(--danger-text);
  --focus-ring: var(--focus);
  --shadow-none: none;
  --shadow-overlay: var(--shadow-lg);
  --radius-0: var(--radius-sm);
  --radius-dot: var(--radius-pill);
  --container-max: 1200px;
  --page-gutter: 24px;
  --measure-text: 68ch;
  --hairline: 1px;
  --control-h: 46px;
  --mark: 10px;
}