/* Car4Sale — tokens.css · v1.0 "Forecourt, warm"
   The contract between the design handoff and the code. Import once at the root.
   Never hard-code a hex in a component. Never add a token without adding both themes.
   Light values on :root, dark values on [data-theme="dark"] — same names, different values.
   Dark mode is NOT shipped in v1.0 (decision in 08-open-decisions.md) — keep the block, don't wire the switch. */

:root {
  /* ink — text and the ink surface */
  --c4s-ink:            #191612;   /* headings, primary button, header, footer, premium surface */
  --c4s-ink-2:          #50483E;   /* body, secondary text */
  --c4s-ink-3:          #776E62;   /* meta, labels, placeholders, disabled */
  --c4s-ink-invert:     #FFFFFF;   /* type on ink */
  --c4s-ink-invert-2:   rgba(255,255,255,0.78);  /* secondary type on ink */
  --c4s-ink-invert-3:   rgba(255,255,255,0.66);  /* meta / PREMIUM label on ink */

  /* surfaces */
  --c4s-canvas:         #F4F1EC;   /* page background */
  --c4s-surface:        #FFFEFC;   /* cards, bars, sheets, inputs on canvas */
  --c4s-surface-2:      #F8F5F1;   /* spec pills, picker fields, table stripes, quiet rows */
  --c4s-letterbox:      #EDE8E1;   /* photo box behind object-fit: cover; no-photo panel fill is surface-2 */
  --c4s-line:           #E6E1DA;   /* card border, hairline dividers */
  --c4s-line-strong:    #D2CBC1;   /* input borders, ghost buttons, device frame */
  --c4s-line-faint:     #F0EBE4;   /* in-card row dividers */

  /* premium — the paid surface. Same geometry as a card, ink ground, white type */
  --c4s-premium:        #191612;
  --c4s-premium-line:   #191612;   /* border matches fill; the card reads as one block */
  --c4s-premium-2:      #2A251F;   /* photo letterbox / no-photo fill on premium */
  --c4s-premium-pill:   #302A22;   /* spec pill ground on premium */
  --c4s-premium-blue:   #6BA1EE;   /* Verified / links on premium — the only blue allowed on ink */

  /* sand — the selling door and the hero highlight. Not a status colour. */
  --c4s-sand:           #EFE1CC;
  --c4s-sand-line:      #E0CEB2;
  --c4s-sand-ink:       #50483E;   /* body text on sand */

  /* action + status */
  --c4s-blue:           #2C5FB8;   /* links, Verified phone, platform offers (save search, alerts, premium) */
  --c4s-blue-ink:       #1E4489;   /* hover / pressed */
  --c4s-blue-wash:      #EAF0FA;   /* selected filter, informational banner */
  --c4s-blue-wash-line: #C9D9F2;
  --c4s-good:           #1C7A52;   /* published, sent, photo score pass */
  --c4s-good-wash:      #E9F5EF;
  --c4s-warn:           #A8730A;   /* still true and needs you: expiring, caution */
  --c4s-warn-wash:      #FCF3E2;
  --c4s-warn-wash-line: #EBD9AE;
  --c4s-alert:          #C2371F;   /* price came down, failed, removed. Never a buyer's decision */
  --c4s-alert-wash:     #FBEDEA;

  /* brand — logo only, never UI */
  --c4s-plate-blue:     #4F8BE0;

  /* type */
  --c4s-font-ui:        Archivo, system-ui, Helvetica, sans-serif;
  --c4s-font-mono:      "IBM Plex Mono", ui-monospace, monospace;
  --c4s-font-plate:     "Saira Condensed", sans-serif;

  --c4s-text-display:   32px;   /* 34 lh · 800 · -0.03em   (desktop hero 46/1.04, mobile hero 27/1.16) */
  --c4s-text-title:     24px;   /* 28 lh · 800 · -0.024em */
  --c4s-text-heading:   20px;   /* 26 lh · 700 · -0.02em */
  --c4s-text-subhead:   17px;   /* 24 lh · 700 · -0.014em */
  --c4s-text-body:      15px;   /* 24 lh · 400 */
  --c4s-text-body-sm:   13.5px; /* 20 lh · 400 */
  --c4s-text-caption:   12.5px; /* 18 lh · 400 — the floor */
  --c4s-text-label:     11px;   /* mono · 600 · uppercase · 0.12em */
  --c4s-price-card:     17px;   /* mono 600 tabular -0.015em (16 on 124px card, 18 on 240px) */
  --c4s-price-detail:   30px;   /* mono 600 tabular -0.025em */

  /* space — 4px base */
  --c4s-space-1: 4px;  --c4s-space-2: 8px;  --c4s-space-3: 12px; --c4s-space-4: 16px;
  --c4s-space-5: 20px; --c4s-space-6: 24px; --c4s-space-8: 32px; --c4s-space-10: 40px;
  --c4s-space-14: 56px;

  /* radius — nothing is fully round except avatars */
  --c4s-radius-badge:   4px;    /* badges, spec pills, photo counts, unread count */
  --c4s-radius-chip:    8px;    /* chips */
  --c4s-radius-control: 8px;    /* buttons, inputs, pickers */
  --c4s-radius-card:    12px;   /* cards, panels, dialogs */
  --c4s-radius-sheet:   16px;   /* sheets, top corners only */

  /* controls */
  --c4s-control-primary:   52px;  /* mobile primary */
  --c4s-control-primary-d: 46px;  /* desktop primary */
  --c4s-control:           44px;  /* mobile secondary, chips row, list rows */
  --c4s-control-d:         38px;  /* desktop secondary */
  --c4s-tap-min:           44px;

  /* elevation — shadow means "floats", never "is a card" */
  --c4s-raised: 0 2px 6px -3px rgb(25 22 18 / 0.18);        /* sticky bars, dropdowns, action bar */
  --c4s-sheet:  0 -10px 30px -12px rgb(25 22 18 / 0.40);    /* bottom sheets, dialogs */
  --c4s-scrim:  rgb(25 22 18 / 0.45);

  /* motion */
  --c4s-dur-instant:  90ms;   /* press, chip toggle */
  --c4s-dur-standard: 120ms;  /* hover, focus, tint, pane crossfade */
  --c4s-dur-spatial:  220ms;  /* sheet, dialog, toast, arrival card */
  --c4s-ease-in:  cubic-bezier(.2,.8,.2,1);
  --c4s-ease-out: cubic-bezier(.4,0,1,1);

  /* layout */
  --c4s-gutter:         16px;
  --c4s-gutter-tablet:  24px;
  --c4s-gutter-desktop: 32px;
  --c4s-max-width:      1440px;
  --c4s-header-d:       64px;
  --c4s-pane-list:      560px;   /* desktop result list */
  --c4s-rail-tablet:    276px;   /* tablet filter rail */
  --c4s-thread-list:    360px;   /* desktop inbox thread list */
  --c4s-dialog:         460px;   /* desktop sign-in dialog */
  --c4s-email:          600px;
  --c4s-card-photo:     124px;   /* mobile */
  --c4s-card-photo-t:   168px;   /* tablet */
  --c4s-card-photo-d:   240px;   /* desktop */
  --c4s-bottom-nav:     72px;    /* 26px icon + 12.5px label + padding, above safe area */
}

/* dark — same names, new values. Warm, not blue-black. Not wired in v1.0. */
[data-theme="dark"] {
  --c4s-ink:            #F5F1EA;
  --c4s-ink-2:          #C4BBAC;
  --c4s-ink-3:          #8C8172;
  --c4s-ink-invert:     #191612;
  --c4s-ink-invert-2:   rgba(25,22,18,0.78);
  --c4s-ink-invert-3:   rgba(25,22,18,0.66);

  --c4s-canvas:         #141210;
  --c4s-surface:        #1C1915;
  --c4s-surface-2:      #241F19;
  --c4s-letterbox:      #2A251F;
  --c4s-line:           #2E2820;
  --c4s-line-strong:    #3A332A;
  --c4s-line-faint:     #241F19;

  --c4s-premium:        #F5F1EA;   /* the ladder flips: paid is the light block on a dark list */
  --c4s-premium-line:   #F5F1EA;
  --c4s-premium-2:      #E2DBD2;
  --c4s-premium-pill:   #EDE8E1;
  --c4s-premium-blue:   #2C5FB8;

  --c4s-sand:           #3A332A;
  --c4s-sand-line:      #4A4237;
  --c4s-sand-ink:       #E2DBD2;

  --c4s-blue:           #6BA1EE;
  --c4s-blue-ink:       #8FBAF5;
  --c4s-blue-wash:      #1B2536;
  --c4s-blue-wash-line: #2A3A55;
  --c4s-good:           #4FBF8B;
  --c4s-good-wash:      #14261E;
  --c4s-warn:           #DFA83C;
  --c4s-warn-wash:      #2A2114;
  --c4s-warn-wash-line: #4A3A1E;
  --c4s-alert:          #F08268;
  --c4s-alert-wash:     #2C1B17;

  --c4s-raised: none;
  --c4s-sheet:  0 -10px 30px -12px rgb(0 0 0 / 0.6);
  --c4s-scrim:  rgb(0 0 0 / 0.6);
}

/* breakpoints — three names, everywhere: mobile (<768), tablet (768–1119), desktop (≥1120) */
@custom-media --tablet  (min-width: 768px);
@custom-media --desktop (min-width: 1120px);

/* global resets that are rules, not styles */
html { -webkit-font-smoothing: antialiased; hyphens: none; }
body { margin: 0; background: var(--c4s-canvas); color: var(--c4s-ink); font-family: var(--c4s-font-ui); font-size: var(--c4s-text-body); line-height: 1.6; }
a { color: var(--c4s-blue); text-decoration: none; }
a:hover { color: var(--c4s-blue-ink); }
h1, h2, h3, h4 { text-wrap: balance; letter-spacing: -0.02em; margin: 0; }
p { text-wrap: pretty; margin: 0; }
.c4s-mono, [data-mono] { font-family: var(--c4s-font-mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid rgb(44 95 184 / 0.35); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition-property: opacity !important; animation-duration: 0.01ms !important; } }