/* ==========================================================================
   DRIVE ID — Design tokens
   Source of truth: DRIVE-ID-BUILD-GUIDE.md §5.2
   This file carries forward into Phase 1. Keep it framework-free.

   D5 IS ENFORCED STRUCTURALLY HERE:
   there is no red text token. Red exists only as --fill-primary.
   Measured contrast (WCAG 2.2 AA target, NFR-004):
     text on bg .............. 17.7:1  safe everywhere
     muted on surface ......... 6.6:1  safe for secondary labels
     white on red ............. 4.57:1 passes AA, no margin — do not darken red
     red on bg ................ 3.86:1 FAILS as text. Fill only.
     data accent on surface ... 4.09:1 FAILS as text. Charts/graphics only.
   ========================================================================== */

:root {
  /* --- Surfaces ------------------------------------------------------- */
  --bg:            #0B1118;
  --surface:       #151D26;
  --surface-2:     #1B2530;   /* raised: hover, nested cards */
  --border:        #2A3440;
  --border-strong: #3A4655;

  /* --- Text (the only tokens permitted on type) ----------------------- */
  --text:          #F5F7FA;
  --text-muted:    #98A2B3;
  --text-on-fill:  #F5F7FA;

  /* --- Fills (NEVER apply to type) ------------------------------------ */
  --fill-primary:  #D9272E;
  --fill-primary-hover: #E8383F;
  --fill-success:  #34A853;
  --fill-data:     #7567F8;

  /* --- Status text (accessible equivalents of the fills) --------------- */
  /* When status must be *written*, use these, not the fills above. */
  --text-success:  #5FD07E;   /* 8.75:1 on surface */
  --text-warning:  #F0B34A;   /* 9.1:1 on surface */

  /* --- Type ----------------------------------------------------------- */
  --font-sans: "Inter", "Aptos", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num:  var(--font-sans);

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.45vw, 1.50rem);
  --step-2:  clamp(1.60rem, 1.40rem + 1.00vw, 2.20rem);
  --step-3:  clamp(2.10rem, 1.70rem + 2.00vw, 3.40rem);
  --step-4:  clamp(2.40rem, 1.80rem + 2.40vw, 3.60rem);

  /* --- Space / shape -------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.28);

  --wrap: 1120px;
  --wrap-narrow: 720px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 var(--sp-4); font-weight: 650; letter-spacing: -0.02em; }
h1 { font-size: var(--step-4); letter-spacing: -0.035em; }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p  { margin: 0 0 var(--sp-4); }

a { color: var(--text); text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

img, svg { max-width: 100%; height: auto; display: block; }

/* Visible focus everywhere — §8 accessibility baseline */
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-5); }
.wrap-narrow { max-width: var(--wrap-narrow); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Components — build order per guide §5.4
   -------------------------------------------------------------------------- */

/* 1. Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;                     /* mobile touch target */
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--fill-primary); color: var(--text-on-fill); }
.btn-primary:hover { background: var(--fill-primary-hover); }

.btn-secondary {
  background: var(--surface); color: var(--text); border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-2); }

.btn-block { width: 100%; }

/* 2. Cards -------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}

/* 3. Chips / status ----------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-size: var(--step--1);
  color: var(--text);
  white-space: nowrap;
}
/* Colour is never the only status signal — every status chip carries an icon
   and a word. Guide §8 / spec §16.1. */
.chip-verified { color: var(--text-success); border-color: color-mix(in srgb, var(--text-success) 35%, var(--border)); }

/* 4. Spec key/value list ------------------------------------------------ */
.speclist { display: grid; gap: 0; margin: 0; }
.speclist div {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.speclist div:last-child { border-bottom: 0; }
.speclist dt { color: var(--text-muted); font-size: var(--step--1); margin: 0; }
.speclist dd {
  margin: 0; font-weight: 600;
  font-variant-numeric: tabular-nums;    /* spec §5.3 */
  text-align: right;
}

/* 5. Form fields -------------------------------------------------------- */
.field { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field label { font-size: var(--step--1); font-weight: 600; }
.field .hint { font-size: var(--step--1); color: var(--text-muted); }
.field input[type="text"],
.field input[type="email"] {
  width: 100%; min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text); font: inherit;
}
.field input::placeholder { color: var(--text-muted); }
.field input:focus-visible { border-color: var(--text); }

.check { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-5); }
.check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--fill-primary); }
.check label { font-size: var(--step--1); color: var(--text-muted); line-height: 1.5; }

/* Validation: never colour alone — the message carries the meaning */
.form-msg { font-size: var(--step--1); margin-top: var(--sp-3); }
.form-msg[data-state="error"]   { color: var(--text-warning); }
.form-msg[data-state="success"] { color: var(--text-success); }

/* 6. Photo placeholder --------------------------------------------------
   Stands in for real vehicle photography. Intentionally obvious.
   Replace every instance before this page goes in front of anyone. */
.photo {
  position: relative;
  background:
    linear-gradient(135deg, #1d2836 0%, #0f1620 55%, #171f2b 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid; place-items: center;
  overflow: hidden;
}
.photo::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .28;
}
.photo span {
  position: relative; z-index: 1;
  font-size: var(--step--1); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .12em;
  text-align: center; padding: var(--sp-4);
}

/* 7. Reduced motion — spec §16.1 ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}