/* =====================================================================
   Forecourt · design tokens
   Car dealers and vehicle sellers. Light is "Showroom"; dark is "Night drive".
   --rev is the one accent (buttons, links, the drive-away price, active filters).
   --hi is a yellow for fills only (badges, the finance bar, the speed stripe); text on it is ink. --hi-ink is its text colour.
   --ok marks checks that passed (PPSR clear, service history); --alert marks invalid fields and things a buyer must know.
   ===================================================================== */
:root {
  color-scheme: light;
  --paper: #f5f6f7;
  --card: #ffffff;
  --well: #eceef1;
  --line: #d9dde3;
  --ink: #101215;
  --ink-2: #363b45;
  --muted: #596070;
  --rev: #a03606;
  --rev-2: #822b04;
  --on-rev: #ffffff;
  --rev-soft: #fbe7dc;
  --hi: #ffcf3f;
  --hi-soft: #fff4cf;
  --hi-ink: #7a5600;
  --ok: #0d6b3a;
  --alert: #b0201a;
  --focus: #a03606;
  --shadow-card: 0 1px 2px rgba(16, 18, 21, 0.06), 0 18px 36px -26px rgba(16, 18, 21, 0.4);
  --shadow-lift: 0 30px 60px -30px rgba(16, 18, 21, 0.5);

  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Chivo Mono", ui-monospace, Menlo, monospace;

  --fs-h1: clamp(48px, 7vw, 108px);
  --fs-h2: clamp(36px, 4.4vw, 64px);
  --fs-h3: 22px;
  --fs-lead: clamp(17.5px, 1.35vw, 20.5px);
  --fs-body: 16.5px;
  --fs-small: 15px;
  --fs-label: 12px;

  --wrap: 1200px;
  --gutter: max(20px, 4vw);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px; --s-7: 64px; --s-8: 104px;

  --r-s: 4px;
  --r-m: 8px;
  --r-l: 12px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 150ms;
  --d: 300ms;
  --d-slow: 900ms;
}

/* ---------- Night drive ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0d0f12;
    --card: #171a1f;
    --well: #121418;
    --line: #2a2f37;
    --ink: #eef0f3;
    --ink-2: #d0d4db;
    --muted: #a1a8b5;
    --rev: #ff9c5b;
    --rev-2: #ffb985;
    --on-rev: #2a1000;
    --rev-soft: #2c1b10;
    --hi: #ffcf3f;
    --hi-soft: #2b2410;
    --hi-ink: #ffcf3f;
    --ok: #6fd69c;
    --alert: #ff9a8f;
    --focus: #ff9c5b;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 34px -20px rgba(0, 0, 0, 0.85);
    --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d0f12;
  --card: #171a1f;
  --well: #121418;
  --line: #2a2f37;
  --ink: #eef0f3;
  --ink-2: #d0d4db;
  --muted: #a1a8b5;
  --rev: #ff9c5b;
  --rev-2: #ffb985;
  --on-rev: #2a1000;
  --rev-soft: #2c1b10;
  --hi: #ffcf3f;
  --hi-soft: #2b2410;
  --hi-ink: #ffcf3f;
  --ok: #6fd69c;
  --alert: #ff9a8f;
  --focus: #ff9c5b;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 34px -20px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
}