/* Cars legal pages share the app's tokens and locally hosted typefaces. */
/* ==========================================================================
   Cars That Fit - COLOUR TOKENS. The single source of every colour in the app.
   To change a colour, edit ONE line in PART 1 (primitives). Semantic roles in
   PART 2 and the legacy names in PART 3 follow automatically.
   How-to + rules: cars/web/source/COLORS.md. Gate: tools/test/cars-color-tokens.test.js
   build.js injects this file as the first rule of the app shell, the landing
   pages and draw-rules.html, and reads --ctf-cream for <meta theme-color> and
   both web manifests.
   ========================================================================== */
/* ctf-tokens:begin */
:root{
  /* ---------- PART 1  PRIMITIVES (the only hex values in the product) ---------- */
  /* Citrus Pop (2026-10-23): warmer cream, louder orange + teal. Not the logo lockup. */
  --ctf-ink: #0A2F36;             /* Citrus Pop ink */
  --ctf-cream: #FFF6EC;           /* Citrus Pop cream — page ground */
  --ctf-glass: #C8F3EE;           /* Citrus Pop glass */
  --ctf-orange: #FF6A1A;          /* Citrus Pop orange loud — decoration + CTA fill */
  --ctf-teal: #0FA8A0;            /* Citrus Pop teal loud — Want fill (ink text; white fails AA) */
  --ctf-teal-light: #63C6C1;      /* from teal loud, 35% toward white: stripe band 2 */
  /* neutral */
  --ctf-white: #FFFFFF;           /* photo ground; swipe-card face */
  /* derived (each from a Citrus Pop hex for an AA reason — see COLORS.md) */
  --ctf-paper: #FFFFFF;           /* Citrus Pop paper/card — same as white, named as the card role */
  --ctf-orange-fill: #FF6A1A;     /* orange loud as a fill that carries INK text (4.98:1) */
  --ctf-orange-ink: #C24A0A;      /* Citrus Pop orange deep — AA text/icons/edges on cream */
  --ctf-orange-wash: #FFEBDB;     /* from cream + 8% orange: image wells, "Check first" tint, Beta */
  --ctf-orange-soft: #FFDDC6;     /* from cream + 18% orange: "Compromises" tint, warm card edge */
  --ctf-teal-ink: #0B6F6A;        /* Citrus Pop teal deep — AA text/links; Want border; progress */
  --ctf-teal-hover: #0E9690;      /* from teal + 15% ink. Not used under ink text (3.93:1). */
  --ctf-ink-hover: #0C5356;       /* from ink + 30% teal: ink-button hover/pressed */
  --ctf-slate: #476164;           /* from ink, lightened 25% toward cream: muted text (6.21:1 on cream) */
  --ctf-slate-tint: #F0EAE1;      /* from cream + 6% ink: "Still to verify" / saved washes */
  --ctf-line: #CAE5DB;            /* from cream + 22% teal: decorative hairlines */
  --ctf-line-strong: #6A8588;     /* Citrus Pop dashed/control boundary (Doesn't matter stamp) */
  --ctf-track: #E2DED6;           /* from cream + 12% ink: progress track, quiet fills */
  --ctf-ash: #EBE6DD;             /* from cream + 8% ink: disabled control fill (WCAG-exempt) */
  --ctf-slate-soft: #607576;      /* from ink, lightened 35% toward cream: disabled text (WCAG-exempt) */
  --ctf-orange-ink-deep: #824119; /* from orange-ink + 35% ink: "does not fit" */

  /* ---------- PART 2  SEMANTIC ROLES (reference primitives only) ---------- */
  /* surfaces */
  --ctf-bg: var(--ctf-cream);                     /* page ground, html/body, app bar, menu (cream chrome) */
  --ctf-surface: var(--ctf-paper);                /* cards (.fy-result, .fy-consult), menu list, sheets, ... */
  --ctf-photo-ground: var(--ctf-white);           /* licensed white-background vehicle thumbnails */
  --ctf-card-face: var(--ctf-white);              /* Find Your Fit swipe card: face, art box, title + hint area (art is on #FFFFFF) */
  --ctf-surface-alt: var(--ctf-orange-wash);      /* image wells (.fy-result-photo), vote icon discs */
  --ctf-surface-glass: var(--ctf-glass);          /* chips, Matches tint, selected-segment ground */
  --ctf-border: var(--ctf-line);                  /* decorative hairlines (.fy-review li, .fy-evidence, card edges). Not a ... */
  --ctf-border-strong: var(--ctf-line-strong);    /* control boundary: .fy-btn, .fy-chip, .fy-open, inputs, Not-important ... */
  /* text and links */
  --ctf-text: var(--ctf-ink);                     /* headings, body, labels (replaces --ink, --fy-ink) */
  --ctf-text-muted: var(--ctf-slate);             /* captions, hints, counters, photo captions, source lines (replaces ... */
  --ctf-text-on-primary: var(--ctf-cream);        /* cream text/icon on ink fills (Save, Must-have) */
  --ctf-link: var(--ctf-teal-ink);                /* inline links, See fits now, Read source, Edit (replaces #245876 blue, ... */
  --ctf-link-hover: var(--ctf-ink);               /* link hover/pressed; links stay underlined so colour is never the only ... */
  --ctf-focus-ring: var(--ctf-ink);               /* 3px outline offset 3px on light grounds (replaces #2869A0) */
  --ctf-focus-ring-inverse: var(--ctf-cream);     /* focus ring on any dark ground (e.g. dark overlay/scrim) */
  /* actions */
  --ctf-primary: var(--ctf-ink);                  /* primary button fill: Explore this car, Next, See my Fits, Start ... */
  --ctf-primary-hover: var(--ctf-ink-hover);      /* primary hover/pressed */
  --ctf-primary-text: var(--ctf-text-on-primary); /* text on primary */
  --ctf-accent: var(--ctf-orange);                /* DECORATION ONLY: stripe band 1, illustrations. Never text, never ... */
  --ctf-accent-fill: var(--ctf-orange-fill);      /* orange fill that carries INK text (e.g. optional CTA/badge). Never ... */
  --ctf-accent-ink: var(--ctf-orange-ink);        /* orange text/icons/edges on cream/paper */
  --ctf-want: var(--ctf-teal);                    /* Want button fill, WANT stamp (loud teal) */
  --ctf-want-hover: var(--ctf-teal);              /* same as Want: teal-hover is too dark for ink text (3.93:1) */
  --ctf-want-text: var(--ctf-ink);                /* ink on loud teal 4.84:1 (white on #0FA8A0 is 2.95:1) */
  --ctf-want-border: var(--ctf-teal-ink);         /* deep teal edge carries 3:1 vs cream/paper (loud fill is 2.76:1) */
  --ctf-not-important: var(--ctf-slate);          /* Not important label colour, X glyph */
  --ctf-not-important-bg: var(--ctf-paper);       /* Not important button fill */
  --ctf-not-important-border: var(--ctf-line-strong);/* Not important button boundary (dashed) */
  /* verdicts (icon + word + edge style are ALWAYS shown; colour is never the only cue) */
  --ctf-verdict-good: var(--ctf-teal-ink);        /* Matches your wants: deep teal edge + icon (loud teal on glass is 2.46:1) */
  --ctf-verdict-good-bg: var(--ctf-glass);        /* Matches your wants: row fill */
  --ctf-verdict-good-edge: solid;                 /* Matches your wants: border-left-style (never colour alone) */
  --ctf-verdict-compromise: var(--ctf-orange-ink);/* Compromises: left edge + icon fill (.fy-compromise) */
  --ctf-verdict-compromise-bg: var(--ctf-orange-soft);/* Compromises: row fill */
  --ctf-verdict-compromise-edge: solid;           /* Compromises: border-left-style (never colour alone) */
  --ctf-verdict-check: var(--ctf-orange-ink-deep);/* Check first: deep orange — orange-ink on the wash is 4.24:1 */
  --ctf-verdict-check-bg: var(--ctf-orange-wash); /* Check first: row fill */
  --ctf-verdict-check-edge: dashed;               /* Check first: border-left-style (never colour alone) */
  --ctf-verdict-browse: var(--ctf-slate);         /* Still to verify / Not applicable / Price varies: left edge + icon ... */
  --ctf-verdict-browse-bg: var(--ctf-slate-tint); /* Still to verify / Not applicable / Price varies: row fill */
  --ctf-verdict-browse-edge: dotted;              /* Still to verify / Not applicable / Price varies: border-left-style ... */
  --ctf-verdict-saved: var(--ctf-slate);          /* Saved, not checked yet: left edge + icon fill (.fy-pending) */
  --ctf-verdict-saved-bg: var(--ctf-slate-tint);  /* Saved, not checked yet: row fill */
  --ctf-verdict-saved-edge: dotted;               /* Saved, not checked yet: border-left-style (never colour alone) */
  --ctf-verdict-no: var(--ctf-orange-ink-deep);   /* Does not fit (garage/seat overflow) - APPROVED: left edge + icon fill ... */
  --ctf-verdict-no-bg: var(--ctf-orange-soft);    /* Does not fit (garage/seat overflow) - APPROVED: row fill */
  --ctf-verdict-no-edge: double;                  /* Does not fit (garage/seat overflow) - APPROVED: border-left-style ... */
  --ctf-verdict-text: var(--ctf-ink);             /* verdict title inside every row */
  --ctf-verdict-detail: var(--ctf-slate);         /* verdict detail line */
  --ctf-verdict-icon-text: var(--ctf-paper);      /* glyph on filled verdict icon discs (check, minus, !) */
  /* chips and progress */
  --ctf-chip-bg: var(--ctf-glass);                /* static chips (5 wants, Up to $50,000, 5+ seats) */
  --ctf-chip-text: var(--ctf-ink);                /* chip text */
  --ctf-progress-fill: var(--ctf-teal-ink);       /* swipe progress fill — loud teal fails 3:1 vs the track */
  --ctf-progress-track: var(--ctf-track);         /* progress track */
  --ctf-card-edge: var(--ctf-orange-soft);        /* warm peach swipe-card outline */
  /* header, stripe, logo tile, nav */
  --ctf-header-bg: var(--ctf-cream);              /* app bar */
  --ctf-header-text: var(--ctf-ink);              /* app bar title/icons */
  --ctf-stripe-1: var(--ctf-orange);              /* header stripe band 1 (top) */
  --ctf-stripe-2: var(--ctf-teal-light);          /* header stripe band 2 */
  --ctf-stripe-3: var(--ctf-teal);                /* header stripe band 3 (bottom) */
  --ctf-logo-tile: var(--ctf-cream);              /* tile behind the logo mark; REQUIRED whenever the mark sits on a dark ... */
  --ctf-logo-tile-ring: var(--ctf-line-strong);   /* optional 2px ring around the logo tile on dark grounds (cream tile vs ... */
  --ctf-nav-bg: var(--ctf-cream);                 /* menu drawer, desktop top nav */
  --ctf-nav-text: var(--ctf-slate);               /* menu row subtitle, top-nav label */
  --ctf-nav-text-active: var(--ctf-teal-ink);     /* current menu row / top-nav label */
  --ctf-nav-marker: var(--ctf-orange-ink);        /* current menu row underline, top-nav overline (3:1+ on cream) */
  /* swipe stamps */
  --ctf-stamp-want-bg: var(--ctf-want);           /* WANT stamp fill */
  --ctf-stamp-want-text: var(--ctf-want-text);    /* WANT stamp text */
  --ctf-stamp-want-border: var(--ctf-want-border);/* WANT stamp 3px border */
  --ctf-stamp-no-bg: var(--ctf-card-face);        /* NOT IMPORTANT stamp fill: the white card face it sits on */
  --ctf-stamp-no-text: var(--ctf-not-important);  /* NOT IMPORTANT stamp text */
  --ctf-stamp-no-border: var(--ctf-not-important-border);/* NOT IMPORTANT stamp 3px dashed #6A8588 */
  /* disabled, shadow, scrim */
  --ctf-disabled-bg: var(--ctf-ash);              /* disabled controls (WCAG-exempt) */
  --ctf-disabled-text: var(--ctf-slate-soft);     /* disabled text (WCAG-exempt) */
  --ctf-shadow: color-mix(in srgb, var(--ctf-ink) 10%, transparent);/* soft elevation shadow colour (derived from ink so it follows the ... */
  --ctf-shadow-strong: color-mix(in srgb, var(--ctf-ink) 22%, transparent);/* pressed/raised shadow colour */
  --ctf-scrim: color-mix(in srgb, var(--ctf-ink) 72%, transparent);/* overlay/scrim behind modals and photo overlays; 72% keeps cream text ... */
  --ctf-scrim-photo: color-mix(in srgb, var(--ctf-ink) 94%, transparent);/* fullscreen photo viewer: page text must not read through behind the photo (QA #1106, 390px) */
  --ctf-on-scrim: var(--ctf-cream);               /* text on a scrim */

  /* ---------- PART 3  LEGACY BRIDGE (temporary; delete per md section 5b) ----------
     Old names resolve to ctf tokens so unmigrated CSS/JS follows the palette
     immediately. NO new code may use these. Phase 1 = remove when the file is
     migrated; Phase 2 = remove after fit-cards/mama CSS is gone; Phase 3 =
     semantic status colours, remove after Product Designer sign-off + test update. */
  --cream: var(--ctf-bg);                     /* phase 1: shell.html :root, theme-mama (#F7F1E8 / #FBEEE6) */
  --paper: var(--ctf-bg);                     /* phase 1 */
  --inset: var(--ctf-surface);                /* phase 1: #FBF6EE */
  --card: var(--ctf-surface);                 /* phase 1: #FFF (card ground becomes warm paper) */
  --ink: var(--ctf-text);                     /* phase 1: #2B2620 / #102D38 */
  --muted: var(--ctf-text-muted);             /* phase 1: #5C5449 */
  --faint: var(--ctf-text-muted);             /* phase 1: #6E665B */
  --coral: var(--ctf-primary);                /* phase 2: #FF6B5E: coral buttons become ink buttons */
  --coral-d: var(--ctf-primary-hover);        /* phase 2: #E8503F */
  --coral-ink: var(--ctf-link);               /* phase 2: #B23E1C: used as text/focus; becomes teal-ink (use --ctf-accent-ink where a warm accent is wanted) */
  --coral-bg: var(--ctf-surface-glass);       /* phase 2: #FFF1EF */
  --teal-bright: var(--ctf-teal);             /* phase 2: #2BB3A3 */
  --teal: var(--ctf-link);                    /* phase 2: #0F7468 (legacy --teal is a text colour) */
  --teal-bg: var(--ctf-surface-glass);        /* phase 2: #E9F8F6 */
  --green: var(--ctf-verdict-good);           /* phase 3: #37B26B  [semantic: needs Product Designer sign-off] */
  --green-ink: var(--ctf-link);               /* phase 3: #1C7A48. TEXT on --green-bg, so teal-ink (4.99:1 on glass); verdict-good teal is a UI colour (4.14:1) */
  --green-bg: var(--ctf-verdict-good-bg);     /* phase 3: #E6F7EE */
  --amber: var(--ctf-verdict-check);          /* phase 3: #F0A93B [sign-off] */
  --amber-ink: var(--ctf-verdict-check);      /* phase 3: #8A5C00 */
  --amber-bg: var(--ctf-verdict-check-bg);    /* phase 3: #FDF1DD */
  --red: var(--ctf-verdict-no);               /* phase 3: #E5564B [sign-off: red is not a logo colour] */
  --red-ink: var(--ctf-verdict-no);           /* phase 3: #A23329 */
  --red-bg: var(--ctf-verdict-no-bg);         /* phase 3: #FCEAE8 */
  --line: var(--ctf-border);                  /* phase 1: #E4D9C5 */
  --line-2: var(--ctf-border);                /* phase 1: #E3DBCD */
  --line-strong: var(--ctf-border-strong);    /* phase 1: #94876E */
  --focus-ring: inset 0 0 0 2px var(--ctf-surface), 0 0 0 3px var(--ctf-focus-ring);/* phase 1: 3px ink ring + a 2px paper line inside, so it shows on ink and teal fills too and adds no extra outset to clip; was var(--coral-ink) */
  --e-sm: 0 1px 2px var(--ctf-shadow);        /* phase 2: rgba(44,42,51,..) elevation set; keep geometry, swap colour */
  --e-md: 0 4px 14px var(--ctf-shadow);       /* phase 2 */
  --e-lg: 0 12px 32px var(--ctf-shadow-strong);/* phase 2 */
  --fy-ink: var(--ctf-text);                  /* phase 1: #142e43 (fit-cards.css line 3) */
  --fy-lime: var(--ctf-want);                 /* phase 1: #d5f667 (fit-cards.css line 3) */
  --mm-navy: var(--ctf-ink);                  /* phase 1: #102D38 */
  --mm-orange: var(--ctf-orange);             /* phase 1: #E75917 */
  --mm-teal: var(--ctf-teal);                 /* phase 1: #1B8A95 */
  --mm-cream: var(--ctf-cream);               /* phase 1: #FBEEE6 (dE 1.7 from logo cream) */
  --mm-teal-ink: var(--ctf-teal-ink);         /* phase 1: #17767F */
  --mm-amber: var(--ctf-teal-light);          /* phase 1: #F2A031 amber is not a logo colour: stripe band 2 becomes teal-light */
  --mm-lane: var(--ctf-surface);              /* phase 2: #FFF loader lane */
  --mm-car-a: var(--ctf-glass);               /* phase 2: #8FC3B7 loader car */
  --mm-car-b: var(--ctf-orange-fill);         /* phase 2: #F0A02E loader car */
}
/* ctf-tokens:end */

@font-face{font-family:Fraunces;src:url('/fonts/fraunces-600.v1.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Nunito;src:url('/fonts/nunito-400.v1.woff2') format('woff2');font-weight:400;font-display:swap}
*{box-sizing:border-box}
html{scroll-padding-top:1rem}
body{margin:0;background:var(--ctf-bg);color:var(--ctf-text);font:1rem/1.65 Nunito,system-ui,sans-serif;-webkit-text-size-adjust:100%}
a{color:var(--ctf-link);text-underline-offset:.2em;overflow-wrap:anywhere}
a:focus-visible{outline:3px solid var(--ctf-focus-ring);outline-offset:4px}
.skip{position:absolute;left:1rem;top:-10rem}
.skip:focus{top:1rem;background:var(--ctf-surface);padding:.75rem;z-index:1}
header,main,footer{max-width:48rem;margin:0 auto;padding:1.25rem}
header{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 1.5rem;border-bottom:1px solid var(--ctf-border)}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;font-family:Fraunces,Georgia,serif;font-weight:600}
.brand img{width:2.75rem;height:2.75rem}
.back{margin-left:auto;padding:.5rem 0}
main{padding-top:2rem;padding-bottom:2rem}
h1,h2,h3{line-height:1.3}
h1,h2{font-family:Fraunces,Georgia,serif;font-weight:600}
h1{font-size:2rem;margin:0 0 .5rem}
h2{font-size:1.35rem;margin:0 0 .75rem}
h3{font-size:1.1rem;margin:1.5rem 0 .5rem}
.date,footer{color:var(--ctf-text-muted);font-size:.9rem}
.date{margin:0 0 1.5rem}
.lede{font-size:1.1rem}
nav{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin:1.5rem 0}
nav a{display:inline-flex;align-items:center;min-height:44px}
.card{padding:1.25rem;margin-top:1.25rem;border:1px solid var(--ctf-border);border-radius:1rem;background:var(--ctf-surface);overflow-wrap:anywhere}
p{margin:.75rem 0}
ul{padding-left:1.25rem}
li+li{margin-top:.5rem}
footer{border-top:1px solid var(--ctf-border)}
footer nav{margin:0}
@media(max-width:30rem){header,main,footer{padding-left:1rem;padding-right:1rem}.card{padding:1rem}.back{margin-left:0}}