/* Design tokens. Every section reads these; change a vehicle colour here and it changes everywhere. */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Vehicle identity — used for every R1S / R2 mark, bar, outline and chip. */
  --r1s: #3355ff;          /* cobalt: fills, bars, outlines on light fields */
  --r1s-ink: #1f36c7;      /* text-safe cobalt on light fields (>= 4.5:1 on white) */
  --r1s-glow: #8ea0ff;     /* cobalt on dark fields */
  --r1s-soft: #dfe4ff;
  --r2: #f2600c;           /* tangerine: fills, bars, outlines */
  --r2-ink: #b23c00;       /* text-safe tangerine on light fields */
  --r2-glow: #ff9a52;      /* tangerine on dark fields */
  --r2-soft: #ffe4d2;

  /* Neutrals */
  --ink: #0d0f1c;
  --ink-2: #3d4157;
  --ink-3: #6a6e85;
  --paper: #f7f5f0;
  --white: #ffffff;
  --line: rgb(13 15 28 / 0.12);
  --on-dark: #f4f5fb;
  --on-dark-2: #b7bbd0;

  /* Section fields (backgrounds). Light fields host photography; dark fields host schematics. */
  --field-hero-a: #dfe3ff;
  --field-hero-b: #ffe6d6;
  --field-spin: #eceef4;
  --field-spin-floor: #e1e4ec;
  --field-range: #c9f1dc;
  --field-speed: #0c0d14;
  --field-charge: #e4defe;
  --field-space: #d9ebff;
  --field-finish: #eeede8;
  --field-air: #ffe98f;
  --field-roof: #13132a;
  --field-cockpit: #18191f;
  --field-reference: var(--paper);

  /* Data status — shared visual language for EPA / estimate / target */
  --status-epa: var(--ink);
  --status-estimate: #7a5cff;
  --status-target: #b5179e;

  /* Type scale (fluid, laptop + landscape tablet first) */
  --t-mega: clamp(88px, 15vw, 260px);
  --t-display: clamp(56px, 7.6vw, 132px);
  --t-h2: clamp(44px, 5.6vw, 96px);
  --t-h3: clamp(28px, 2.8vw, 44px);
  --t-number: clamp(64px, 8.4vw, 148px);
  --t-number-s: clamp(40px, 4.6vw, 76px);
  --t-lead: clamp(19px, 1.55vw, 25px);
  --t-label: 15px;
  --t-small: 13px;

  /* Space */
  --gutter: clamp(24px, 5vw, 88px);
  --section-pad: clamp(104px, 14vh, 184px);
  --max: 1520px;
  --radius-section: clamp(28px, 3.4vw, 56px);
  --radius-pill: 999px;
  --radius-panel: 28px;

  /* Elevation */
  --shadow-pop: 0 1px 1px rgb(13 15 28 / 0.06), 0 10px 24px -8px rgb(13 15 28 / 0.22);
  --shadow-press: 0 1px 1px rgb(13 15 28 / 0.08), 0 3px 8px -4px rgb(13 15 28 / 0.25);

  /* Motion (CSS side; JS springs live in js/lib/spring.js) */
  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.1 27.7%, 1.06 32.4%, 1.019 37.2%, 0.995 42.2%, 0.988 45.6%, 0.991 53%, 1.001 66.8%, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-press: 140ms;
  --dur-ui: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ease-spring: linear;
    --dur-press: 0ms;
    --dur-ui: 0ms;
  }
}