/* ============================================================================
   TOKENS — the only place raw values live.
   ----------------------------------------------------------------------------
   Everything downstream (base / layout / components / pages / crm) composes from
   here. Section paddings used to be hand-picked per block (64/56/52/48/44/40px
   for neighbouring sections), which is why the vertical rhythm never lined up.

   Design direction: "auction lane" — navy trust base, one decisive red action
   colour, a warm amber reserved for live/urgency, and a diagonal lane-stripe
   motif as the signature device. Deliberately not a generic SaaS palette.
   ========================================================================= */
:root{
  /* ---- brand ---------------------------------------------------------- */
  --navy:#0a2540;          /* primary surface + text on light */
  --navy-2:#0e3a63;        /* gradient partner */
  --navy-3:#12324f;
  --ink:#0b1622;           /* darkest — footer, code surfaces */
  --red:#d23b3b;           /* the single action colour */
  --red-2:#b32d2d;
  --accent:#1565c0;        /* links / informational — 5.7:1 on white (was #1e88e5, 3.7:1, axe 2026-10-20) */
  --amber:#c8791a;         /* live auction, urgency — never used for actions */
  --ok:#12805c;

  /* ---- surfaces ------------------------------------------------------- */
  --white:#fff;
  --paper:#f5f7fa;         /* page background */
  --paper-2:#eef2f7;       /* alternating band */
  --line:#e2e8f0;
  --line-2:#cfd8e3;
  --muted:#5b6b7c;
  --muted-2:#8a9bad;       /* on dark surfaces */
  --on-dark:#c4d6ea;       /* body text on navy */
  --on-dark-dim:#a9c0d8;   /* muted text on navy — stays above 4.5:1 */

  /* ---- spacing scale (4px base) --------------------------------------- */
  --s-1:4px;  --s-2:8px;   --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-7:32px;  --s-8:40px; --s-9:48px; --s-10:64px; --s-11:96px;

  /* Vertical rhythm for full-width sections — one knob for the whole page. */
  --sec-y:clamp(40px,6vw,72px);
  --sec-y-lg:clamp(56px,8vw,96px);

  /* ---- type scale ----------------------------------------------------- */
  --font:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-num:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --t-xs:.75rem; --t-sm:.86rem; --t-base:1rem; --t-md:1.08rem; --t-lg:1.18rem;
  --t-xl:1.4rem; --t-2xl:1.75rem;
  --t-display:clamp(1.9rem,4.2vw,3.2rem);
  --t-section:clamp(1.45rem,2.6vw,2.05rem);
  --lh-tight:1.08; --lh-snug:1.3; --lh-body:1.6;
  /* Display text is set tight; that contrast against the neutral UI text is
     what makes the page read as designed rather than defaulted. */
  --track-display:-.022em; --track-caps:.06em;

  /* ---- shape ---------------------------------------------------------- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --radius:var(--r-lg);                       /* legacy alias */
  --border:1px solid var(--line);

  /* ---- elevation ------------------------------------------------------ */
  --shadow-sm:0 1px 2px rgba(10,37,64,.06);
  --shadow:0 6px 24px rgba(10,37,64,.10);
  --shadow-lg:0 12px 36px rgba(10,37,64,.16);

  /* ---- motion --------------------------------------------------------- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.16s;

  /* ---- layout --------------------------------------------------------- */
  --wrap:1140px;
  --head-h:64px;

  /* ---- signature: auction lane ---------------------------------------- */
  /* A very low-contrast diagonal texture over dark surfaces. Deliberately near the
     threshold of visibility: at full strength the stripes read as scratches on the
     screen, which is the last association a salvage-car site wants. The decisive
     part of the motif is `--lane-edge`, the angled red rule that closes dark bands. */
  --lane:repeating-linear-gradient(
      -58deg,
      rgba(255,255,255,.022) 0 1px,
      rgba(255,255,255,0) 1px 34px);
  --lane-edge:linear-gradient(90deg,var(--red) 0%,rgba(210,59,59,.15) 62%,transparent 100%);
}

@media(prefers-reduced-motion:reduce){
  :root{--dur:0s}
  html{scroll-behavior:auto}
}