/*
 * Design tokens.
 *
 * Palette comes from BMW M's own identity rather than a generic dark theme:
 * the M tricolour (light blue → violet → red) is the marque's actual
 * vernacular, and it earns its place here by carrying the scroll progress
 * rail — blue at the nose, red by the time you're in the cockpit. The base
 * is a cool graphite rather than pure black, because the car is a carbon-body
 * car and carbon reads blue-grey, not #000.
 */

@font-face {
  font-family: 'Barlow Condensed';
  src: url('/fonts/barlow-condensed-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/fonts/barlow-condensed-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/fonts/barlow-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/fonts/barlow-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Surface — cool graphite, the colour of dry carbon weave. */
  --carbon-900: #0a0b0e;
  --carbon-800: #0f1116;
  --carbon-700: #161922;
  --carbon-600: #1e222d;
  --hairline: #272c38;

  /* Backdrop: the studio wall behind the car. Kept slightly blue so it reads
     as a lit surface rather than lifted black, and matched to the cool key in
     scene/environment.js so the 3D and the page agree about where the light
     is coming from. */
  --backdrop-glow: #33405a;
  --backdrop-mid: #1b2231;
  --backdrop-floor: #2b3547;

  /* Ink. Values are set by measured contrast, not by eye: at the previous
     #666d7c the eyebrow labels sat at 3.6:1 on the card background — below
     the 4.5:1 needed for text that small — and lifting the backdrop would
     have pushed them further down. These clear 4.5:1 everywhere the text
     actually lands. */
  --bone: #edeef1;
  --slate: #a6adba;
  --slate-dim: #868ea0;

  /* BMW M tricolour */
  --m-blue: #2e9bd6;
  --m-violet: #7a4b9e;
  --m-red: #e4002b;

  /* Type */
  --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Type scale — condensed display runs large without shouting. */
  --t-hero: clamp(3.2rem, 12vw, 9rem);
  --t-h2: clamp(2rem, 5.5vw, 3.75rem);
  --t-h3: clamp(1.35rem, 2.6vw, 1.9rem);
  --t-body: clamp(1rem, 1.1vw, 1.1rem);
  --t-small: 0.875rem;
  --t-micro: 0.6875rem;

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --stack: clamp(4rem, 10vw, 9rem);

  --rail-w: 3px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}