:root, [data-theme="dark"] {
  --surface-canvas: #000000;
  --surface-base: #0a0a0a;
  --surface-raised: #141414;
  --surface-card: #181818;
  --surface-inset: #262626;
  --surface-hover: #323232;
  --border-subtle: #1f1f1f;
  --border-default: #2e2e2e;
  --border-strong: #757575;
  --text-primary: #fafafa;
  --text-secondary: #b0b0b0;
  --text-muted: #8f8f8f;
  --text-on-brand: #ffffff;
  --text-on-accent: #0a0a0a;
  --brand: #2b6bff;
  --brand-hover: #1d55e0;
  --brand-press: #1744b8;
  --brand-soft: #8ab4ff;
  --brand-tint: #101c36;
  --brand-ring: #5b8cff;
  --accent: #c6f24e;
  --accent-hover: #b4e136;
  --accent-soft: #d7f882;
  --accent-tint: #1e2a0c;
  --success: #46d494;
  --success-tint: #10291e;
  --warning: #e8ad5c;
  --warning-tint: #2b210f;
  --danger: #ff6b6b;
  --danger-tint: #2e1414;
  --info: #2ab7f5;
  --info-tint: #08202e;
  --aqua: #53d9c5;
  --magenta: #f3509c;
  --chart-1: #3774ff;
  --chart-2: #b17000;
  --chart-3: #e40086;
  --chart-4: #708d06;
  --chart-spark: #c6f24e;
  --chart-neutral: #6f6f6f;
  --chart-grid: #262626;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.6);
  --shadow-pop: 0 18px 44px rgba(0,0,0,0.72);
  --shadow-glow: 0 0 0 1px rgba(43,107,255,0.55), 0 0 36px rgba(43,107,255,0.35);
}
[data-theme="light"] {
  --surface-canvas: #ffffff;
  --surface-base: #f4f5f7;
  --surface-raised: #fbfbfc;
  --surface-card: #ffffff;
  --surface-inset: #eceef2;
  --surface-hover: #e2e5ea;
  --border-subtle: #e8eaee;
  --border-default: #d3d8e0;
  --border-strong: #767d8a;
  --text-primary: #0a0a0a;
  --text-secondary: #525966;
  --text-muted: #636a77;
  --text-on-brand: #ffffff;
  --text-on-accent: #0a0a0a;
  --brand: #1f52d6;
  --brand-hover: #1844b5;
  --brand-press: #123a9c;
  --brand-soft: #1f52d6;
  --brand-tint: #e7eeff;
  --brand-ring: #1f52d6;
  --accent: #a3d327;
  --accent-hover: #8fbc16;
  --accent-soft: #55700e;
  --accent-tint: #f1fbd4;
  --success: #0f7a51;
  --success-tint: #dcf7ec;
  --warning: #8f5b04;
  --warning-tint: #fbf0dc;
  --danger: #c02626;
  --danger-tint: #fde6e6;
  --info: #0a72a3;
  --info-tint: #ddf2fb;
  --aqua: #0b7a6b;
  --magenta: #b81f66;
  --chart-1: #2c6cfe;
  --chart-2: #a86b06;
  --chart-3: #da0580;
  --chart-4: #6a8703;
  --chart-spark: #6a8703;
  --chart-neutral: #7f8896;
  --chart-grid: #e8eaee;
  --shadow-card: 0 1px 2px rgba(16,20,28,0.06), 0 1px 1px rgba(16,20,28,0.04);
  --shadow-pop: 0 14px 34px rgba(16,20,28,0.12);
  --shadow-glow: 0 0 0 1px rgba(31,82,214,0.35), 0 10px 28px rgba(31,82,214,0.18);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-20: 80px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;
  --opacity-disabled: 0.4;
  --opacity-area: 0.12;
  --opacity-scrim: 0.72;
  --font-display: Tomorrow, 'Arial Black', Impact, sans-serif;
  --font-sans: Geist, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
@font-face { font-family: "Tomorrow"; src: url("fonts/Tomorrow-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Tomorrow"; src: url("fonts/Tomorrow-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Tomorrow"; src: url("fonts/Tomorrow-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
.display-xl { font-family: var(--font-display); font-size: 72px; line-height: 66px; font-weight: 900; letter-spacing: -0.02em; }
.display-l { font-family: var(--font-display); font-size: 48px; line-height: 48px; font-weight: 900; letter-spacing: -0.015em; }
.display-m { font-family: var(--font-display); font-size: 36px; line-height: 40px; font-weight: 800; letter-spacing: -0.01em; }
.display-s { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 800; letter-spacing: -0.005em; }
.display-xs { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 800; letter-spacing: 0; }
.title-l { font-family: var(--font-sans); font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; }
.title-m { font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.005em; }
.headline { font-family: var(--font-sans); font-size: 16px; line-height: 22px; font-weight: 600; }
.body { font-family: var(--font-sans); font-size: 15px; line-height: 24px; font-weight: 400; }
.body-strong { font-family: var(--font-sans); font-size: 15px; line-height: 24px; font-weight: 500; }
.subhead { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; }
.label { font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.14em; }
.code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }
.metric { font-family: var(--font-mono); font-size: 32px; line-height: 34px; font-weight: 500; letter-spacing: -0.01em; }
.metric-s { font-family: var(--font-mono); font-size: 18px; line-height: 22px; font-weight: 500; }