/* BMW Service — generated from tokens.json */
@font-face { font-family: "Geologica"; src: url("./fonts/Geologica-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("./fonts/MartianMono-Variable.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
:root, [data-theme="night"] {
  --night-000: #040507;
  --night-100: #080a0e;
  --night-200: #0c0f14;
  --night-300: #12161d;
  --night-400: #191e27;
  --night-500: #232a35;
  --ink: #e8edf4;
  --ink-soft: #b7c1ce;
  --ink-muted: #8a96a7;
  --ink-faint: #5d6878;
  --line: rgba(190, 210, 235, 0.10);
  --line-strong: rgba(190, 210, 235, 0.20);
  --line-control: #636f81;
  --glass-fill: rgba(170, 198, 235, 0.06);
  --glass-fill-hover: rgba(170, 198, 235, 0.10);
  --glass-deep: rgba(6, 9, 13, 0.82);
  --glass-top: rgba(255, 255, 255, 0.07);
  --glass-edge: rgba(214, 230, 255, 0.14);
  --glass-edge-hi: rgba(240, 247, 255, 0.40);
  --glass-sheen: rgba(220, 236, 255, 0.09);
  --glass-recess: rgba(0, 0, 0, 0.30);
  --gloss-reflection: rgba(255, 255, 255, 0.12);
  --ice: #7cc8ff;
  --ice-bright: #bfe6ff;
  --ice-deep: #3a9be6;
  --ice-veil: rgba(124, 200, 255, 0.13);
  --ice-glow: rgba(124, 200, 255, 0.45);
  --ice-haze: rgba(124, 200, 255, 0.16);
  --on-ice: #04121f;
  --cabin: #f0a86a;
  --cabin-bright: #ffd4a8;
  --cabin-deep: #b8692f;
  --cabin-veil: rgba(240, 168, 106, 0.13);
  --cabin-glow: rgba(240, 168, 106, 0.42);
  --cabin-haze: rgba(240, 168, 106, 0.12);
  --on-cabin: #1f1208;
  --stitch: rgba(240, 168, 106, 0.62);
  --tail: #ff5a47;
  --tail-core: #ffb09a;
  --tail-deep: #b3261e;
  --tail-glow: rgba(255, 90, 71, 0.45);
  --crystal-hi: #f2f6fb;
  --crystal: #c3cedb;
  --crystal-lo: #5f6b79;
  --crystal-core: #0b121b;
  --alcantara: #1b1d21;
  --alcantara-hi: #272a30;
  --alcantara-lo: #111215;
  --alcantara-mocha: #221c19;
  --signal-ok: #4fd9c9;
  --signal-ok-veil: rgba(79, 217, 201, 0.13);
  --signal-warn: #ffcf57;
  --signal-warn-veil: rgba(255, 207, 87, 0.13);
  --signal-crit: #ff6f61;
  --signal-crit-veil: rgba(255, 111, 97, 0.14);
  --signal-info: var(--ice);
  --focus: var(--ice-bright);
  --link: var(--ice);
  --shadow-rest: 0 1px 1px #00000066, 0 10px 28px -14px #000000cc;
  --shadow-float: 0 2px 4px #00000059, 0 18px 44px -16px #000000e6;
  --shadow-deep: 0 30px 80px -24px #000000f2, 0 12px 28px -12px #000000b3;
  --edge-light: inset 0 1px 0 #ffffff1f, inset 0 -1px 0 #00000059;
  --recess: inset 0 2px 6px #0000008c, inset 0 0 0 1px #00000040;
  --glow-ice: 0 0 0 1px #7cc8ff4d, 0 0 16px #7cc8ff40, 0 0 44px #7cc8ff1f;
  --glow-cabin: 0 0 0 1px #f0a86a47, 0 0 16px #f0a86a3d, 0 0 44px #f0a86a1c;
  --focus-ring: 0 0 0 2px #080a0e, 0 0 0 4px #bfe6ff;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;
  --blur-soft: 8px;
  --blur-glass: 20px;
  --blur-glass-strong: 36px;
  --facet-sm: 6px;
  --facet-md: 12px;
  --facet-lg: 20px;
  --dur-micro: 160ms;
  --dur-base: 320ms;
  --dur-glide: 640ms;
  --dur-reveal: 900ms;
  --dur-wake: 1600ms;
  --dur-breathe: 5200ms;
  --dur-stagger: 70ms;
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-glide: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-breathe: cubic-bezier(0.37, 0, 0.63, 1);
  --container: 1240px;
  --container-wide: 1440px;
  --container-text: 720px;
  --header-h: 72px;
  --bar-h: 64px;
  --crumbs-h: 40px;
  --control-sm: 36px;
  --control-md: 46px;
  --control-lg: 56px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --z-raised: 1;
  --z-header: 50;
  --z-dock: 45;
  --z-menu: 60;
  --z-modal: 100;
  --font-sans: "Geologica", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.t-display-xl { font-family: var(--font-sans); font-size: 96px; line-height: 96px; font-weight: 200; letter-spacing: -0.03em; }
.t-display { font-family: var(--font-sans); font-size: 64px; line-height: 68px; font-weight: 250; letter-spacing: -0.025em; }
.t-numeral { font-family: var(--font-sans); font-size: 56px; line-height: 56px; font-weight: 200; letter-spacing: -0.02em; }
.t-title-1 { font-family: var(--font-sans); font-size: 44px; line-height: 50px; font-weight: 300; letter-spacing: -0.02em; }
.t-title-2 { font-family: var(--font-sans); font-size: 32px; line-height: 38px; font-weight: 300; letter-spacing: -0.015em; }
.t-title-3 { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 400; letter-spacing: -0.005em; }
.t-lead { font-family: var(--font-sans); font-size: 19px; line-height: 30px; font-weight: 300; }
.t-body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.t-body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.t-label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.14em; }
.t-caption { font-family: var(--font-sans); font-size: 12px; line-height: 18px; font-weight: 400; letter-spacing: 0.01em; }
.t-button { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 450; letter-spacing: 0.01em; }
.t-code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; letter-spacing: 0.02em; }