/* Generated by site/tools/tokens.mjs from docs/design/web/tokens.json. Do not edit. */
:root {
  color-scheme: dark light;
  --seed-indigo: #5B6CFF;
  --code-bg: var(--surface-container-highest);
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-3xl: 48px;
  --space-section-sm: 64px;
  --space-section: 112px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --key-rounded: 20px;
  --radius-xl: 28px;
  --radius-phone: 44px;
  --radius-full: 9999px;
  --shadow-card: 0px 1px 2px rgba(0,0,0,0.20), 0px 2px 6px 2px rgba(0,0,0,0.10);
  --shadow-phone: 0px 30px 60px -12px rgba(0,0,0,0.45), 0px 18px 36px -18px rgba(0,0,0,0.50);
  --elevation-3: 0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px rgba(0,0,0,0.30);
  --container-max: 1200px;
  --container-text: 680px;
  --nav-height: 72px;
  --bp-md: 600px;
  --bp-lg: 905px;
  --bp-xl: 1240px;
  --phone-w: 320px;
  --touch-min: 48px;
  --icon-key: 28px;
  --icon-sm: 20px;
  --grid-gutter: 12px;
  --grid-margin: 16px;
  --top-bar-height: 56px;
  --state-hover: 0.08;
  --state-pressed: 0.10;
  --disabled-content: 0.38;
  --font-brand: "Roboto Flex", Roboto, system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --primary: #bdc2ff;
  --on-primary: #00149e;
  --primary-container: #0020dd;
  --on-primary-container: #dfe0ff;
  --secondary: #cbc1e9;
  --on-secondary: #322c4c;
  --secondary-container: #494263;
  --on-secondary-container: #e7deff;
  --tertiary: #d9bbf2;
  --on-tertiary: #3d2653;
  --tertiary-container: #543c6b;
  --on-tertiary-container: #f0dbff;
  --power: #ffb3b0;
  --on-power: #68000f;
  --power-container: #92011a;
  --on-power-container: #ffdad8;
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;
  --surface: #12131c;
  --on-surface: #e3e1ef;
  --on-surface-variant: #c6c5d6;
  --surface-dim: #12131c;
  --surface-bright: #383843;
  --surface-container-lowest: #0d0d17;
  --surface-container-low: #1a1b25;
  --surface-container: #1e1f29;
  --surface-container-high: #282934;
  --surface-container-highest: #33343f;
  --surface-variant: #454654;
  --background: #12131c;
  --on-background: #e3e1ef;
  --outline: #8f8f9f;
  --outline-variant: #454654;
  --inverse-surface: #e3e1ef;
  --inverse-on-surface: #2f303a;
  --inverse-primary: #283fff;
  --scrim: #000000;
  --surface-tint: #bdc2ff;
  --tv-screen: #05060a;
}
@media (prefers-color-scheme: light) {
  :root {
    --primary: #283fff;
    --on-primary: #ffffff;
    --primary-container: #dfe0ff;
    --on-primary-container: #0020dd;
    --secondary: #615a7c;
    --on-secondary: #ffffff;
    --secondary-container: #e7deff;
    --on-secondary-container: #494263;
    --tertiary: #6d5484;
    --on-tertiary: #ffffff;
    --tertiary-container: #f0dbff;
    --on-tertiary-container: #543c6b;
    --power: #b5242f;
    --on-power: #ffffff;
    --power-container: #ffdad8;
    --on-power-container: #410006;
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #93000a;
    --surface: #fbf8ff;
    --on-surface: #1a1b25;
    --on-surface-variant: #454654;
    --surface-dim: #dad8e7;
    --surface-bright: #fbf8ff;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f4f2ff;
    --surface-container: #eeecfb;
    --surface-container-high: #e8e7f5;
    --surface-container-highest: #e3e1ef;
    --surface-variant: #e2e1f3;
    --background: #fbf8ff;
    --on-background: #1a1b25;
    --outline: #767685;
    --outline-variant: #c6c5d6;
    --inverse-surface: #2f303a;
    --inverse-on-surface: #f1effe;
    --inverse-primary: #bdc2ff;
    --scrim: #000000;
    --surface-tint: #283fff;
    --tv-screen: #0b0c12;
  }
}