:root{
  /* ---- base palette (sampled from the live automobile site) ---- */
  --white:#ffffff;
  --ink-900:#000000;
  --ink-800:#1a1a1a;
  --ink-700:#333333;
  --ink-600:#434343;  /* scroll-to-top disc */
  --ink-500:#4d4d4d;  /* menu chip */
  --ink-400:#767676;
  --ink-300:#a89c9c;  /* timestamp / meta, faintly warm */
  --ink-200:#cccccc;
  --hairline:#e2e2e2;
  --shade-050:#f7f7f7;
  --shade-100:#f0f0f0;  /* the one and only section tint */

  /* brand red — the single accent on the whole site */
  --croco-red-900:#5a0f08;
  --croco-red-700:#8c1810;
  --croco-red-500:#a63a30;
  --croco-red-100:#f2e4e2;

  /* material accents pulled from the product photography (charts, tags, washes) */
  --wood-800:#6b4a2f;
  --wood-500:#a8703f;
  --wood-200:#d8bd97;
  --steel-500:#8e979b;
  --steel-200:#c8cfd2;
  --sky-300:#b9cfdd;

  /* ---- semantic aliases ---- */
  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-700);
  --text-muted:var(--ink-400);
  --text-meta:var(--ink-300);
  --text-accent:var(--croco-red-700);
  --text-inverse:var(--white);

  --surface-page:var(--white);
  --surface-section:var(--shade-100);
  --surface-card:var(--white);
  --surface-control:var(--ink-500);
  --surface-control-strong:var(--ink-600);
  --surface-scrim:rgba(0,0,0,0.34);

  --border-hairline:var(--hairline);
  --border-strong:var(--ink-200);
  --focus-ring:var(--croco-red-700);
  --link-color:var(--ink-900);
  --link-color-hover:var(--croco-red-700);
}