/* Supersei — generated from design/tokens.json by scripts/build-tokens.py. Do not edit. */
:root {
  color-scheme: light;
  --canvas: #fafaf7;
  --surface: #ffffff;
  --surface-sunk: #f2f3ee;
  --surface-raised: #ffffff;
  --band: #0a1220;
  --text-primary: #0a1220;
  --text-secondary: #3a4556;
  --text-tertiary: #5e6878;
  --on-band: #f1f5f9;
  --on-band-muted: #a8b3c4;
  --line-subtle: rgba(10,18,32,.06);
  --line: rgba(10,18,32,.10);
  --line-strong: rgba(10,18,32,.18);
  --line-band: rgba(241,245,249,.12);
  --brand: #10b981;
  --brand-hover: #059669;
  --brand-text: #047857;
  --brand-tint: #e3f6ee;
  --on-brand: #03140d;
  --brand-deep: #059669;
  --brand-bright: #34d399;
  --teal: #0e7490;
  --ai: #6d28d9;
  --ai-tint: #f1ebfe;
  --hot: #c2410c;
  --ok: #047857;
  --warn: #b45309;
  --err: #b91c1c;
  --info: #0369a1;
  --focus: #0a1220;
  --focus-band: #6ee7b7;
  --scrim: rgba(4,11,22,.6);
  --shadow-raised: 0 1px 2px rgba(10,18,32,.05), 0 6px 16px rgba(10,18,32,.05);
  --shadow-float: 0 24px 64px rgba(10,18,32,.16);
  --shadow-frame: 0 40px 120px -20px rgba(10,18,32,.28), 0 0 0 1px rgba(10,18,32,.06);
  --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;
  --space-10: 128px;
  --space-11: 160px;
  --container: 1240px;
  --nav-height: 68px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --z-nav: 50;
  --z-banner: 60;
  --z-modal: 80;
  --z-toast: 90;
  --font-sans: Outfit, "Noto Sans", "Noto Sans Devanagari", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #07111f;
  --surface: #0d1828;
  --surface-sunk: #0a1524;
  --surface-raised: #142235;
  --band: #040b16;
  --text-primary: #f1f5f9;
  --text-secondary: #c3cedc;
  --text-tertiary: #8e9bb0;
  --line-subtle: rgba(226,232,240,.07);
  --line: rgba(226,232,240,.12);
  --line-strong: rgba(226,232,240,.20);
  --brand-hover: #34d399;
  --brand-text: #6ee7b7;
  --brand-tint: #10322a;
  --teal: #67e8f9;
  --ai: #a78bfa;
  --ai-tint: #221a3d;
  --hot: #fb923c;
  --ok: #34d399;
  --warn: #fbbf24;
  --err: #f87171;
  --info: #38bdf8;
  --focus: #6ee7b7;
  --scrim: rgba(2,6,15,.72);
  --shadow-raised: 0 1px 0 rgba(255,255,255,.03) inset, 0 6px 16px rgba(2,6,23,.3);
  --shadow-float: 0 24px 64px rgba(2,6,23,.6);
  --shadow-frame: 0 40px 120px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(226,232,240,.08);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --canvas: #07111f;
    --surface: #0d1828;
    --surface-sunk: #0a1524;
    --surface-raised: #142235;
    --band: #040b16;
    --text-primary: #f1f5f9;
    --text-secondary: #c3cedc;
    --text-tertiary: #8e9bb0;
    --line-subtle: rgba(226,232,240,.07);
    --line: rgba(226,232,240,.12);
    --line-strong: rgba(226,232,240,.20);
    --brand-hover: #34d399;
    --brand-text: #6ee7b7;
    --brand-tint: #10322a;
    --teal: #67e8f9;
    --ai: #a78bfa;
    --ai-tint: #221a3d;
    --hot: #fb923c;
    --ok: #34d399;
    --warn: #fbbf24;
    --err: #f87171;
    --info: #38bdf8;
    --focus: #6ee7b7;
    --scrim: rgba(2,6,15,.72);
    --shadow-raised: 0 1px 0 rgba(255,255,255,.03) inset, 0 6px 16px rgba(2,6,23,.3);
    --shadow-float: 0 24px 64px rgba(2,6,23,.6);
    --shadow-frame: 0 40px 120px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(226,232,240,.08);
  }
}
.display-2xl { font-family: var(--font-sans); font-size: 96px; line-height: 92px; font-weight: 600; letter-spacing: -0.045em; }
.display-xl { font-family: var(--font-sans); font-size: 72px; line-height: 72px; font-weight: 600; letter-spacing: -0.04em; }
.display-l { font-family: var(--font-sans); font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -0.035em; }
.h1 { font-family: var(--font-sans); font-size: 44px; line-height: 50px; font-weight: 600; letter-spacing: -0.03em; }
.h2 { font-family: var(--font-sans); font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -0.02em; }
.h3 { font-family: var(--font-sans); font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; }
.h4 { font-family: var(--font-sans); font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: 0; }
.lead { font-family: var(--font-sans); font-size: 20px; line-height: 32px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 17px; line-height: 28px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 15px; line-height: 24px; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; }
.overline { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.metric { font-family: var(--font-sans); font-size: 48px; line-height: 52px; font-weight: 600; letter-spacing: -0.03em; }
.code { font-family: var(--font-mono); font-size: 14px; line-height: 22px; font-weight: 400; }