/* ============================================================
   CarAgeRental — Design tokens
   Consolidated from the CarAgeRental design system
   (tokens/colors.css, typography.css, spacing.css).
   Fonts are loaded via a <link> in index.html.
   Only the CORE-BRAND (luxury monochrome) palette is used on
   this page — the partner navy/cream/purple palette is
   intentionally left out. Teal/orange/red survive only as
   financial semantics (✓ chips, money numbers, ✗ rows).
   ============================================================ */

:root {
  /* ---------- CORE BRAND · luxury monochrome ---------- */
  --black-900: #0A0A0B;    /* primary background */
  --charcoal-800: #141416; /* secondary background, cards on black */
  --white: #FFFFFF;        /* primary type on dark */
  --gray-400: #9A9A9E;     /* secondary type, captions */
  --champagne: #C8C4BC;    /* the single accent */

  --hairline: rgba(255, 255, 255, 0.15);
  --hairline-strong: rgba(255, 255, 255, 0.28);

  /* ---------- financial semantics (kept from partner palette) ---------- */
  --teal-500: #14C8A0;     /* checkmarks, positive highlights, "no cost" */
  --orange-500: #FF7A3C;   /* warnings, big money numbers */
  --partner-red: #E5484D;  /* ✗ rows, "not recommended" */

  /* ---------- type families ---------- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  /* type scale */
  --fs-display-xl: clamp(3.5rem, 9vw, 7.5rem);
  --fs-display-l: clamp(2.5rem, 5.5vw, 4rem);
  --fs-h2: 2rem;
  --fs-h3: 1.5rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-caption: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  /* weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* line-heights */
  --lh-tight: 0.95;
  --lh-snug: 1.15;
  --lh-body: 1.6;

  /* letter-spacing */
  --ls-display: -0.02em;
  --ls-mono: 0.18em;
  --ls-mono-tight: 0.12em;

  /* layout */
  --container-max: 1280px;

  /* radius */
  --radius-sm: 4px;
  --radius-card-core: 8px;
  --radius-pill: 999px;

  /* motion — slow & expensive */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 600ms;
}