/* Informed for Life design tokens. See design/DESIGN_LANGUAGE.md.
   This file is the only place a raw colour or size value belongs.
   Loaded before styles.css, so styles.css and any page CSS can consume it. */

:root {
    /* --- Rating scale. The site's core vocabulary; never reuse these hues. --- */
    --rate-good: #146c43;
    --rate-good-bg: #e7f4ec;
    --rate-good-line: #a8d5bd;
    --rate-acceptable: #0f6674;
    --rate-acceptable-bg: #e3f1f4;
    --rate-acceptable-line: #a5cdd5;
    --rate-marginal: #9a5b00;
    --rate-marginal-bg: #fdf0dd;
    --rate-marginal-line: #e8c48a;
    --rate-poor: #b42318;
    --rate-poor-bg: #fbe8e5;
    --rate-poor-line: #eeb3ab;
    --rate-none: #6b7280;
    --rate-none-bg: #f1f3f5;
    --rate-none-line: #d5dade;

    /* --- Brand --- */
    --ink: #0d1b2a;
    --ink-raised: #152a40;
    --ink-text: #ffffff;
    --ink-text-muted: #b8c4d0;
    --signal: #ffc107;
    --signal-hover: #ffd450;
    --signal-ink: #0d1b2a;

    /* --- Neutrals: exactly two backgrounds, one line ramp --- */
    --surface: #ffffff;
    --page: #f6f7f9;
    --line: #e3e7eb;
    --line-strong: #cbd2d9;
    --text: #16212b;
    --text-muted: #5b6673;
    --text-faint: #8a949f;

    /* --- Type scale --- */
    --font-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    --fs-display: clamp(2.1rem, 5vw, 3.2rem);
    --fs-h2: clamp(1.4rem, 2.6vw, 1.85rem);
    --fs-h3: 1.1rem;
    --fs-lead: 1.12rem;
    --fs-body: 1rem;
    --fs-sm: 0.875rem;
    --fs-xs: 0.78rem;
    --fs-num-xl: 2.4rem;
    --fs-num: 1.4rem;

    /* --- Spacing, 8px base --- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;

    /* --- Measures --- */
    --measure-read: 68ch;
    --measure-content: 960px;
    --measure-wide: 1100px;

    /* --- Shape and elevation. Borders, not shadows. --- */
    --radius: 10px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --shadow: 0 8px 28px rgba(13, 27, 42, 0.12);
    --transition: 150ms ease;
}

/* --- Rating chip: the atom of the site --------------------------------- */
.rating {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 6.5em;
    padding: 3px 10px;
    border: 1px solid;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.rating-good { color: var(--rate-good); background: var(--rate-good-bg); border-color: var(--rate-good-line); }
.rating-acceptable { color: var(--rate-acceptable); background: var(--rate-acceptable-bg); border-color: var(--rate-acceptable-line); }
.rating-marginal { color: var(--rate-marginal); background: var(--rate-marginal-bg); border-color: var(--rate-marginal-line); }
.rating-poor { color: var(--rate-poor); background: var(--rate-poor-bg); border-color: var(--rate-poor-line); }
.rating-none { color: var(--rate-none); background: var(--rate-none-bg); border-color: var(--rate-none-line); }

/* --- Icons: 24px grid, currentColor, functional only ------------------- */
.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    vertical-align: -0.18em;
}

/* --- Focus: one visible treatment everywhere --------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Recall notices ---------------------------------------------------
   A NHTSA recall is a separate axis from an IIHS rating: a vehicle can hold
   Good across every test and still be under a do-not-drive order. So recalls
   never borrow the rating hues. Urgent campaigns take the brand ink, which
   reads as authoritative without implying a crash-test verdict. */
.recall-list { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.recall { border: 1px solid var(--line); border-left: 3px solid var(--line-strong); background: var(--surface); padding: var(--sp-4); border-radius: 3px; }
.recall-head { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: baseline; margin-bottom: var(--sp-2); }
.recall-part { font-weight: 650; color: var(--text); }
.recall-meta { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.recall p { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); line-height: 1.55; }
.recall p:last-child { margin-bottom: 0; }
.recall dt { font-weight: 650; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); }
.recall-urgent { border-color: var(--ink); border-left-width: 3px; border-left-color: var(--ink); }
.recall-flag { display: inline-block; background: var(--ink); color: var(--ink-text); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px var(--sp-2); border-radius: 2px; }
.recall-none { color: var(--text-muted); }