/* Neon design tokens — generated from tokens.json. Themes: dark, light (default: dark).
   Switch theme with <html data-theme="light">. */
:root, [data-theme="dark"] {
  --wall: #110e16;
  --wall-raised: #1a1621;
  --wall-sunk: #0a080e;
  --brick: #221d2b;
  --ink: #f4effa;
  --ink-soft: #aaa2ba;
  --line: #6e6684;
  --tube-off: #6a6380;
  --pink: #ff4fa8;
  --blue: #3cb9ff;
  --citrus: #ffe042;
  --mint: #3dffb4;
  --violet: #b98cff;
  --red: #ff5c57;
  --on-tube: #110e16;
  --bracket: #9a93a8;
  --scrim: rgba(5, 4, 8, 0.74);
  --focus: #fff6a8;
  --glow-tight: 0 0 1px currentColor, 0 0 4px currentColor;
  --glow-tube: 0 0 1px currentColor, 0 0 6px currentColor, 0 0 18px currentColor;
  --glow-halo: 0 0 2px currentColor, 0 0 10px currentColor, 0 0 28px currentColor, 0 0 64px currentColor;
  --panel: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 48px -24px rgba(0, 0, 0, 0.85);
  --panel-lift: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 32px 64px -24px rgba(0, 0, 0, 0.95);
  --well: inset 0 2px 6px rgba(0, 0, 0, 0.55);
  --glass: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  color-scheme: dark;
}
[data-theme="light"] {
  --wall: #eeebe5;
  --wall-raised: #faf8f4;
  --wall-sunk: #e3dfd7;
  --brick: #e0dbd1;
  --ink: #1c1823;
  --ink-soft: #5b5466;
  --line: #7f778c;
  --tube-off: #827a8f;
  --pink: #b8125f;
  --blue: #0b62b3;
  --citrus: #8a5600;
  --mint: #00714f;
  --violet: #6a37cf;
  --red: #bd1f2b;
  --on-tube: #ffffff;
  --bracket: #a49eae;
  --scrim: rgba(28, 24, 35, 0.42);
  --focus: #5b2fc9;
  --glow-tight: 0 0 1px currentColor;
  --glow-tube: 0 0 1px currentColor, 0 0 8px currentColor;
  --glow-halo: 0 0 2px currentColor, 0 0 14px currentColor, 0 0 34px currentColor;
  --panel: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(40, 30, 50, 0.08), 0 18px 36px -22px rgba(40, 30, 50, 0.32);
  --panel-lift: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 4px rgba(40, 30, 50, 0.08), 0 28px 48px -24px rgba(40, 30, 50, 0.4);
  --well: inset 0 1px 3px rgba(40, 30, 50, 0.16);
  --glass: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(40, 30, 50, 0.06);
  color-scheme: light;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-tube: 999px;
  --dur-buzz: 110ms;
  --dur-hover: 180ms;
  --dur-flick: 280ms;
  --dur-panel: 320ms;
  --dur-fill: 720ms;
  --dur-sign: 900ms;
  --dur-chase: 2400ms;
  --ease-glow: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-snap: cubic-bezier(0.3, 1.45, 0.5, 1);
  --ease-fill: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.4, 0, 1, 1);
  --font-display: "Monoton", "Tilt Neon", system-ui, sans-serif;
  --font-sign: "Tilt Neon", "Urbanist", system-ui, sans-serif;
  --font-body: "Urbanist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --type-marquee-family: var(--font-display);
  --type-marquee-size: 76px;
  --type-marquee-line: 80px;
  --type-marquee-weight: 400;
  --type-marquee-tracking: 0.02em;
  --type-sign-family: var(--font-sign);
  --type-sign-size: 44px;
  --type-sign-line: 48px;
  --type-sign-weight: 400;
  --type-title-family: var(--font-sign);
  --type-title-size: 28px;
  --type-title-line: 34px;
  --type-title-weight: 400;
  --type-heading-family: var(--font-sign);
  --type-heading-size: 20px;
  --type-heading-line: 26px;
  --type-heading-weight: 400;
  --type-numeral-family: var(--font-sign);
  --type-numeral-size: 48px;
  --type-numeral-line: 48px;
  --type-numeral-weight: 400;
  --type-numeral-tracking: -0.01em;
  --type-control-family: var(--font-sign);
  --type-control-size: 16px;
  --type-control-line: 20px;
  --type-control-weight: 400;
  --type-control-tracking: 0.02em;
  --type-body-family: var(--font-body);
  --type-body-size: 16px;
  --type-body-line: 24px;
  --type-body-weight: 450;
  --type-small-family: var(--font-body);
  --type-small-size: 14px;
  --type-small-line: 20px;
  --type-small-weight: 500;
  --type-label-family: var(--font-body);
  --type-label-size: 12px;
  --type-label-line: 16px;
  --type-label-weight: 700;
  --type-label-tracking: 0.14em;
}
/* Type styles as utility classes (optional) */
.type-marquee { font-family: var(--type-marquee-family); font-size: var(--type-marquee-size); line-height: var(--type-marquee-line); font-weight: var(--type-marquee-weight); letter-spacing: var(--type-marquee-tracking); }
.type-sign { font-family: var(--type-sign-family); font-size: var(--type-sign-size); line-height: var(--type-sign-line); font-weight: var(--type-sign-weight); }
.type-title { font-family: var(--type-title-family); font-size: var(--type-title-size); line-height: var(--type-title-line); font-weight: var(--type-title-weight); }
.type-heading { font-family: var(--type-heading-family); font-size: var(--type-heading-size); line-height: var(--type-heading-line); font-weight: var(--type-heading-weight); }
.type-numeral { font-family: var(--type-numeral-family); font-size: var(--type-numeral-size); line-height: var(--type-numeral-line); font-weight: var(--type-numeral-weight); letter-spacing: var(--type-numeral-tracking); }
.type-control { font-family: var(--type-control-family); font-size: var(--type-control-size); line-height: var(--type-control-line); font-weight: var(--type-control-weight); letter-spacing: var(--type-control-tracking); }
.type-body { font-family: var(--type-body-family); font-size: var(--type-body-size); line-height: var(--type-body-line); font-weight: var(--type-body-weight); }
.type-small { font-family: var(--type-small-family); font-size: var(--type-small-size); line-height: var(--type-small-line); font-weight: var(--type-small-weight); }
.type-label { font-family: var(--type-label-family); font-size: var(--type-label-size); line-height: var(--type-label-line); font-weight: var(--type-label-weight); letter-spacing: var(--type-label-tracking); }