/* Generated by tools/design_tokens.py from tokens.json. Do not edit by hand. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --bg: #ECEAF3;
  --surface: #FFFFFF;
  --surface-raised: #F6F5FA;
  --text: #241C4A;
  --text-secondary: #5A5280;
  --text-muted: #8A83A6;
  --brand: #28185C;
  --primary: #28185C;
  --on-primary: #FFFFFF;
  --accent: #E96E1A;
  --on-accent: #28185C;
  --link: #28185C;
  --focus-ring: #372E7D;
  --control-border: #8A83A6;
  --line: rgba(40, 24, 92, 0.16);
  --verified: #0B6B78;
  --verified-fill: #E1F1F4;
  --signal: #8A5A00;
  --signal-fill: #FBF0D9;
  --alert: #B3261E;
  --alert-fill: #FBE6E4;
  --info: #372E7D;
  --info-fill: #E6E3F2;
  --indigo: #28185C;
  --indigo-deep: #211A46;
  --indigo-light: #372E7D;
  --white: #FFFFFF;
  --orange: #E96E1A;
  --orange-edge: #E54A1F;
  --amber: #F2B604;
  --ink: #241C4A;
  --slate: #5A5280;
  --muted: #8A83A6;
  --paper: #ECEAF3;
  --cloud: #F6F5FA;
  --chart-1: var(--indigo);
  --chart-2: var(--orange);
  --chart-3: var(--slate);
  --chart-4: var(--indigo-light);
  --chart-5: var(--muted);
  --chart-6: var(--verified);
  --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: 16px;
  --radius-pill: 999px;
  --shadow-float: 0 8px 24px rgba(33, 26, 70, 0.18);
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --type-display: 800 56px/1.05 var(--font-display);
  --type-display-tracking: -0.01em;
  --type-h1: 700 40px/1.1 var(--font-display);
  --type-h2: 700 28px/1.2 var(--font-display);
  --type-h3: 600 20px/1.3 var(--font-display);
  --type-wordmark: 700 32px/1.1 var(--font-display);
  --type-wordmark-tracking: -0.5px;
  --type-body-lg: 400 18px/1.5 var(--font-body);
  --type-body: 400 16px/1.5 var(--font-body);
  --type-small: 400 14px/1.45 var(--font-body);
  --type-label: 500 12px/1.3 var(--font-mono);
  --type-label-tracking: 0.04em;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #211A46;
  --surface: #28185C;
  --surface-raised: #372E7D;
  --text: #FFFFFF;
  --text-secondary: #C9C4E0;
  --text-muted: #A39DC2;
  --brand: #372E7D;
  --primary: #FFFFFF;
  --on-primary: #28185C;
  --accent: #E96E1A;
  --on-accent: #28185C;
  --link: #E96E1A;
  --focus-ring: #C9C4E0;
  --control-border: #A39DC2;
  --line: rgba(255, 255, 255, 0.16);
  --verified: #7FD0DC;
  --verified-fill: #173F55;
  --signal: #E8B04A;
  --signal-fill: #3F3320;
  --alert: #FF8A80;
  --alert-fill: #4A1F33;
  --info: #B9B2F0;
  --info-fill: #372E7D;
  --chart-1: #B9B2F0;
  --chart-2: var(--orange);
  --chart-3: #C9C4E0;
  --chart-4: #7FD0DC;
  --chart-5: #A39DC2;
  --chart-6: var(--verified);
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #211A46;
    --surface: #28185C;
    --surface-raised: #372E7D;
    --text: #FFFFFF;
    --text-secondary: #C9C4E0;
    --text-muted: #A39DC2;
    --brand: #372E7D;
    --primary: #FFFFFF;
    --on-primary: #28185C;
    --accent: #E96E1A;
    --on-accent: #28185C;
    --link: #E96E1A;
    --focus-ring: #C9C4E0;
    --control-border: #A39DC2;
    --line: rgba(255, 255, 255, 0.16);
    --verified: #7FD0DC;
    --verified-fill: #173F55;
    --signal: #E8B04A;
    --signal-fill: #3F3320;
    --alert: #FF8A80;
    --alert-fill: #4A1F33;
    --info: #B9B2F0;
    --info-fill: #372E7D;
    --chart-1: #B9B2F0;
    --chart-2: var(--orange);
    --chart-3: #C9C4E0;
    --chart-4: #7FD0DC;
    --chart-5: #A39DC2;
    --chart-6: var(--verified);
    --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
}