/* WHEELS — Typography tokens
   ----------------------------------------------------------------
   Editorial split: a literary SERIF display (Newsreader ≈ Tiempos /
   Copernicus) at weight 400-500 with negative tracking for all headlines,
   paired with a humanist GROTESQUE sans (Hanken Grotesk ≈ StyreneB) for
   body, UI and labels. ARCHIVO (heavy grotesque) carries the "wordmark
   voice" — big stats, numerals, the WHEELS lockup. JetBrains Mono = data.
   Display is NEVER bold (stays 400-500); the serif character IS the brand. */

:root {
  /* ---- Families ---------------------------------------------- */
  --font-display: 'Newsreader', 'Tiempos Headline', Georgia, 'Times New Roman', serif;
  --font-sans:    'Hanken Grotesk', 'StyreneB', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-wordmark:'Archivo', 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Weights ----------------------------------------------- */
  --fw-display:   400; /* @kind font */ /* display never goes bold */
  --fw-display-md:500; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-wordmark:  800; /* @kind font */ /* the heavy grotesque voice */

  /* ---- Display scale (serif) --------------------------------- */
  --display-xl-size: 4rem;     /* 64px — homepage h1 */
  --display-xl-lh:   1.05;      /* @kind font */
  --display-xl-ls:   -0.025em;  /* @kind font */

  --display-lg-size: 3rem;     /* 48px — section heads */
  --display-lg-lh:   1.1;       /* @kind font */
  --display-lg-ls:   -0.021em;  /* @kind font */

  --display-md-size: 2.25rem;  /* 36px — sub-section, model/car names */
  --display-md-lh:   1.15;      /* @kind font */
  --display-md-ls:   -0.014em;  /* @kind font */

  --display-sm-size: 1.75rem;  /* 28px — pricing tiers, callout heads */
  --display-sm-lh:   1.2;       /* @kind font */
  --display-sm-ls:   -0.011em;  /* @kind font */

  /* ---- Titles (sans) ----------------------------------------- */
  --title-lg-size: 1.375rem;   /* 22px */
  --title-lg-lh:   1.3;         /* @kind font */
  --title-md-size: 1.125rem;   /* 18px — card titles, lead */
  --title-md-lh:   1.4;         /* @kind font */
  --title-sm-size: 1rem;       /* 16px — tile titles, list labels */
  --title-sm-lh:   1.4;         /* @kind font */

  /* ---- Body (sans) ------------------------------------------- */
  --body-md-size: 1rem;        /* 16px */
  --body-md-lh:   1.55;         /* @kind font */
  --body-sm-size: 0.875rem;    /* 14px — footer, fine print */
  --body-sm-lh:   1.55;         /* @kind font */

  /* ---- Detail ------------------------------------------------ */
  --caption-size:   0.8125rem; /* 13px */
  --caption-lh:     1.4;        /* @kind font */
  --overline-size:  0.75rem;   /* 12px — category tags, NEW */
  --overline-lh:    1.4;        /* @kind font */
  --overline-ls:    0.125em;    /* @kind font */ /* 1.5px tracking, uppercase */
  --code-size:      0.875rem;  /* 14px */
  --code-lh:        1.6;        /* @kind font */
  --button-size:    0.875rem;  /* 14px */
  --nav-size:       0.875rem;  /* 14px */
}

/* ---- Ready-made type classes (optional convenience) ---------- */
.wh-display-xl { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--display-xl-size); line-height: var(--display-xl-lh); letter-spacing: var(--display-xl-ls); }
.wh-display-lg { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--display-lg-size); line-height: var(--display-lg-lh); letter-spacing: var(--display-lg-ls); }
.wh-display-md { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--display-md-size); line-height: var(--display-md-lh); letter-spacing: var(--display-md-ls); }
.wh-display-sm { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--display-sm-size); line-height: var(--display-sm-lh); letter-spacing: var(--display-sm-ls); }
.wh-title-lg   { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--title-lg-size); line-height: var(--title-lg-lh); }
.wh-title-md   { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--title-md-size); line-height: var(--title-md-lh); }
.wh-title-sm   { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--title-sm-size); line-height: var(--title-sm-lh); }
.wh-body-md    { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--body-md-size); line-height: var(--body-md-lh); }
.wh-body-sm    { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--body-sm-size); line-height: var(--body-sm-lh); }
.wh-caption    { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--caption-size); line-height: var(--caption-lh); }
.wh-overline   { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--overline-size); line-height: var(--overline-lh); letter-spacing: var(--overline-ls); text-transform: uppercase; }
.wh-mono       { font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: var(--code-size); line-height: var(--code-lh); }
.wh-wordmark   { font-family: var(--font-wordmark); font-weight: var(--fw-wordmark); letter-spacing: -0.01em; }