/* ==========================================================================
   Jitcar — LOTLINE design tokens
   Single source of truth per DESIGN.md §2. No color, font, radius, or
   shadow may appear in any template that is not a token from this file.
   ========================================================================== */

:root {

  /* --- Color · brand ---------------------------------------------------- */
  --asphalt:    #23262B;  /* ink: primary text, dark surfaces, sticker headers, paybar */
  --asphalt-2:  #2E323A;  /* secondary dark surface */
  --stage:      #31353D;  /* photo/vehicle stage background */
  --concrete:   #F1F0EB;  /* page background, the default surface */
  --lane:       #F5C518;  /* primary action + highlight — road-marking scarcity, never decorative fills */
  --guide:      #1D6B45;  /* reserved exclusively for VERIFIED truth */

  /* --- Color · supporting ----------------------------------------------- */
  --guide-bg:   #E3F0E8;  /* fit-chip tint */
  --lane-ink:   #7A5D00;  /* text on pale yellow tints */
  --steel:      #6A6E76;  /* secondary text */
  --hairline:   #DEDEDA;
  --hairline-2: #CFCFC9;

  /* Derived neutrals — tints of asphalt on concrete. Derive, don't invent hues. */
  --fill-quiet:    #E9E9E2;                  /* est-chip / droptag fill (boards) */
  --asphalt-08:    rgba(35, 38, 43, .08);    /* quiet hover fills */
  --overlay-light: rgba(255, 255, 255, .14); /* favorite button on the stage */
  --steel-2:       #B9BCC2;                  /* secondary text on dark surfaces (paybar) */
  --guide-border:  #CBE2D4;                  /* border on guide-bg tinted panels */

  /* --- Color · functional only (not brand) ------------------------------ */
  --error:      #B3261E;  /* form field validation ONLY — never on vehicle cards (§4 gap-closer rule) */

  /* --- Type ------------------------------------------------------------- */
  /* Display + UI + body: Overpass. Data (every number a shopper compares):
     Overpass Mono. Self-hosted woff2 in the production app; no third font, ever. */
  --sans: 'Overpass', system-ui, -apple-system, sans-serif;
  --mono: 'Overpass Mono', ui-monospace, 'SFMono-Regular', monospace;

  --w-regular: 400;
  --w-semibold: 600;
  --w-bold: 700;      /* mono data emphasis — chips, pay heroes */
  --w-extrabold: 800;
  --w-black: 900;

  /* Modular scale — the only permitted type steps. */
  --fs-2xs:  0.6875rem;  /* 11px — status chips, stock numbers, card footers */
  --fs-xs:   0.75rem;    /* 12px — kickers, card meta, footnotes */
  --fs-sm:   0.8125rem;  /* 13px — labels, filter rows */
  --fs-base: 0.9375rem;  /* 15px — body */
  --fs-md:   1.0625rem;  /* 17px — card titles, leads */
  --fs-lg:   1.25rem;    /* 20px — paybar payment hero */
  --fs-xl:   1.375rem;   /* 22px — card payment hero */
  --fs-2xl:  1.6875rem;  /* 27px — section headlines */
  --fs-3xl:  2rem;       /* 32px — sticker payment hero (~31–34) */
  --fs-4xl:  2.5rem;     /* 40px — display */

  --lh-tight: 1.15;
  --lh-body:  1.5;

  /* --- Shape ------------------------------------------------------------ */
  --radius-control: 6px;   /* status chips, badges, small controls */
  --radius-field:   11px;  /* search fields, segmented controls, filter buttons (boards) */
  --radius-card:    14px;  /* cards, sheets */
  --radius-pill:    999px; /* filter chips, the header budget chip */

  /* --- Elevation — flat paper: hairlines, near-zero shadows -------------- */
  --shadow-sheet: 0 1px 2px rgba(35, 38, 43, .05), 0 12px 34px rgba(35, 38, 43, .10);
  /* the one soft elevation token, for sheets/modals only */

  /* --- Spacing (4px base) ------------------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* --- Motion — one orchestrated moment per page max (§9) ---------------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms;
  --dur-reveal: 320ms; /* the budget-state flip — the page's earned moment */

  /* --- Pattern — the one sanctioned pattern-fill (§2) --------------------
     Dashed lane-line motif for dark hero bands. */
  --lane-dashes: repeating-linear-gradient(
    90deg,
    var(--lane) 0 26px,
    transparent 26px 44px
  );
}