/* Generated from design-system/tokens.json. Edit the source and run node design-system/generate.mjs. */
:root {
  --theme-page-bg: #060818;
  --theme-surface: #0B0C22;
  --theme-surface-raised: #12102C;
  --theme-surface-highest: #1A1538;
  --theme-tube-unlit: #2A2C5C;
  --theme-tube-dim: color-mix(in srgb, var(--theme-primary-bright) 55%, transparent);
  --theme-tube-faint: color-mix(in srgb, var(--theme-primary-bright) 22%, transparent);
  --theme-text: #F6E9FF;
  --theme-text-muted: #B5ADCC;
  --theme-text-dim: #8A82A6;
  --theme-primary: #A23BFF;
  --theme-primary-bright: #BD45FF;
  --theme-primary-deep: #7B35FF;
  --theme-cyan: #18D9FF;
  --theme-gold: #FFCE38;
  --theme-pink: #FF3FA4;
  --theme-lime: #B8FF3C;
  --theme-red: #FF4D5E;
  --theme-orange: #FF9A3D;
  --theme-overlay: rgba(3, 3, 12, 0.78);
  --theme-gradient-rim: linear-gradient(90deg, var(--theme-primary-bright) 0%, var(--theme-primary-deep) 58%, var(--theme-cyan) 100%);
  --theme-gradient-rim-diagonal: linear-gradient(135deg, var(--theme-primary-bright) 0%, var(--theme-primary-deep) 58%, var(--theme-cyan) 100%);
  --theme-gradient-dome: radial-gradient(circle at 38% 32%, #ffffff 0%, var(--theme-primary-bright) 18%, var(--theme-primary) 46%, var(--theme-primary-deep) 78%, #1a0b3a 100%);
  --theme-glow: 0 0 6px color-mix(in srgb, var(--theme-primary-bright) 75%, transparent), 0 0 18px color-mix(in srgb, var(--theme-primary-bright) 55%, transparent);
  --theme-glow-strong: 0 0 8px color-mix(in srgb, var(--theme-primary-bright) 85%, transparent), 0 0 30px color-mix(in srgb, var(--theme-primary-bright) 70%, transparent), 0 0 6px color-mix(in srgb, var(--theme-cyan) 45%, transparent);
  --theme-glow-cyan: 0 0 12px color-mix(in srgb, var(--theme-cyan) 55%, transparent);
  --theme-glow-gold: 0 0 14px color-mix(in srgb, var(--theme-gold) 55%, transparent);
  --theme-glow-lime: 0 0 12px color-mix(in srgb, var(--theme-lime) 50%, transparent);
  --theme-glow-red: 0 0 12px color-mix(in srgb, var(--theme-red) 50%, transparent);
  --theme-glow-pink: 0 0 14px color-mix(in srgb, var(--theme-pink) 55%, transparent);
  --theme-text-glow: 0 0 14px color-mix(in srgb, var(--theme-primary-bright) 65%, transparent);
  --skill-stream: #00F2FF;
  --skill-speed: #FFDF1A;
  --skill-jack: #FF5A78;
  --skill-ln: #B865FF;
  --theme-accuracy: #B8FF3C;
  --judgment-perfect: #FFFFFF;
  --judgment-great: #FFC83D;
  --judgment-good: #3DFF8A;
  --judgment-bad: #3D7BFF;
  --judgment-miss: #FF4D5E;
  --grade-sss: #FFCE38;
  --grade-ss: #FFCE38;
  --grade-s: #F6E9FF;
  --grade-a: #35E0FF;
  --grade-b: #B8FF3C;
  --grade-c: #FF9A3D;
  --grade-d: #FF4D5E;
  --grade-fail: #B8394A;
  --grade-prismatic: linear-gradient(90deg, #FF4D5E, #FFCE38 25%, #B8FF3C 45%, #35E0FF 65%, #BD45FF 85%, #FF3FA4);
  --keymode-4: #35E0FF;
  --keymode-5: #3DFF8A;
  --keymode-6: #FFC83D;
  --keymode-7: #FF9A3D;
  --keymode-8: #FF3FA4;
  --keymode-9: #C69BFF;
  --keymode-10: #7B79FF;
  --font-display: "Unbounded", "Space Grotesk", system-ui, sans-serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --theme-radius-sm: 8px;
  --theme-radius-frame: 14px;
  --theme-radius-dialog: 22px;
  --theme-radius-pill: 999px;
  --theme-tube-lit: 3px;
  --theme-tube-width-dim: 2px;
  --theme-tube-width-unlit: 1px;
  --theme-bracket: 26px;
  --theme-control-height: 44px;
  --theme-chip-height: 44px;
  --theme-button-height: 52px;
  --theme-keycap-height: 28px;
  --theme-header-height: 72px;
  --theme-dock-height: 96px;
  --theme-content-max: 1600px;
  --theme-page-gutter: clamp(16px, 3vw, 40px);
  --theme-space-1: 4px;
  --theme-space-2: 8px;
  --theme-space-3: 12px;
  --theme-space-4: 16px;
  --theme-space-5: 20px;
  --theme-space-6: 24px;
  --theme-space-7: 32px;
  --theme-space-8: 40px;
  --theme-space-9: 56px;
  --theme-space-10: 80px;
  --theme-motion-fast: 150ms;
  --theme-motion-medium: 240ms;
  --theme-motion-slow: 400ms;
  --theme-ease: cubic-bezier(0.2, 0, 0, 1);
  --theme-transition: 150ms cubic-bezier(0.2, 0, 0, 1);
  --theme-focus-ring: 0 0 0 2px var(--theme-page-bg), 0 0 0 4px var(--theme-cyan);
  --theme-progress-height: 6px;
  --theme-progress-sweep: 1200ms;
  --type-display-xl-size: 64px;
  --type-display-xl-weight: 900;
  --type-display-xl-tracking: -0.01em;
  --type-display-xl-font: var(--font-display);
  --type-display-xl-transform: none;
  --type-display-lg-size: 48px;
  --type-display-lg-weight: 900;
  --type-display-lg-tracking: -0.01em;
  --type-display-lg-font: var(--font-display);
  --type-display-lg-transform: none;
  --type-display-md-size: 40px;
  --type-display-md-weight: 800;
  --type-display-md-tracking: -0.005em;
  --type-display-md-font: var(--font-display);
  --type-display-md-transform: none;
  --type-headline-lg-size: 32px;
  --type-headline-lg-weight: 800;
  --type-headline-lg-tracking: 0em;
  --type-headline-lg-font: var(--font-display);
  --type-headline-lg-transform: none;
  --type-headline-md-size: 24px;
  --type-headline-md-weight: 700;
  --type-headline-md-tracking: 0em;
  --type-headline-md-font: var(--font-display);
  --type-headline-md-transform: none;
  --type-headline-sm-size: 20px;
  --type-headline-sm-weight: 700;
  --type-headline-sm-tracking: 0em;
  --type-headline-sm-font: var(--font-display);
  --type-headline-sm-transform: none;
  --type-title-lg-size: 18px;
  --type-title-lg-weight: 600;
  --type-title-lg-tracking: 0em;
  --type-title-lg-font: var(--font-body);
  --type-title-lg-transform: none;
  --type-title-md-size: 16px;
  --type-title-md-weight: 600;
  --type-title-md-tracking: 0em;
  --type-title-md-font: var(--font-body);
  --type-title-md-transform: none;
  --type-title-sm-size: 14px;
  --type-title-sm-weight: 600;
  --type-title-sm-tracking: 0em;
  --type-title-sm-font: var(--font-body);
  --type-title-sm-transform: none;
  --type-body-lg-size: 18px;
  --type-body-lg-weight: 400;
  --type-body-lg-tracking: 0em;
  --type-body-lg-font: var(--font-body);
  --type-body-lg-transform: none;
  --type-body-md-size: 16px;
  --type-body-md-weight: 400;
  --type-body-md-tracking: 0em;
  --type-body-md-font: var(--font-body);
  --type-body-md-transform: none;
  --type-body-sm-size: 14px;
  --type-body-sm-weight: 400;
  --type-body-sm-tracking: 0em;
  --type-body-sm-font: var(--font-body);
  --type-body-sm-transform: none;
  --type-label-lg-size: 14px;
  --type-label-lg-weight: 700;
  --type-label-lg-tracking: 0.08em;
  --type-label-lg-font: var(--font-body);
  --type-label-lg-transform: uppercase;
  --type-label-md-size: 13px;
  --type-label-md-weight: 700;
  --type-label-md-tracking: 0.08em;
  --type-label-md-font: var(--font-body);
  --type-label-md-transform: uppercase;
  --type-label-sm-size: 12px;
  --type-label-sm-weight: 600;
  --type-label-sm-tracking: 0.06em;
  --type-label-sm-font: var(--font-body);
  --type-label-sm-transform: uppercase;
  --type-label-xs-size: 11px;
  --type-label-xs-weight: 600;
  --type-label-xs-tracking: 0.06em;
  --type-label-xs-font: var(--font-body);
  --type-label-xs-transform: uppercase;
  --type-mono-sm-size: 12px;
  --type-mono-sm-weight: 500;
  --type-mono-sm-tracking: 0em;
  --type-mono-sm-font: var(--font-body);
  --type-mono-sm-transform: none;
  --type-logo-size: 22px;
  --type-logo-weight: 800;
  --type-logo-tracking: 0.14em;
  --type-logo-font: var(--font-display);
  --type-logo-transform: uppercase;
}

[data-theme="purple"] {
  --theme-primary: #A23BFF;
  --theme-primary-bright: #BD45FF;
  --theme-primary-deep: #7B35FF;
}

[data-theme="blue"] {
  --theme-primary: #3D7BFF;
  --theme-primary-bright: #6FA8FF;
  --theme-primary-deep: #266DFF;
}

[data-theme="pink"] {
  --theme-primary: #F03CB4;
  --theme-primary-bright: #FF4CC3;
  --theme-primary-deep: #C2228E;
}