/* ==========================================================================
   Design Tokens
   Single source of truth for the visual language of the site.
   Every color/type/spacing decision elsewhere references these.
   ========================================================================== */

:root {
  /* ---- Color: neutrals ---- */
  --color-ink: #14151a;          /* primary text */
  --color-ink-soft: #4b4d57;     /* secondary text */
  --color-paper: #faf9f7;        /* page background */
  --color-paper-alt: #f1efea;    /* alternating section background */
  --color-border: #e4e1da;       /* hairline borders, card outlines */
  --color-white: #ffffff;

  /* ---- Color: brand ---- */
  --color-accent: #c4302b;       /* primary red - CTAs, highlights */
  --color-accent-dark: #9b2521;  /* hover / pressed state */
  --color-accent-soft: #f6e4e2;  /* tinted backgrounds behind accent text */

  /* ---- Color: signal (used sparingly - the "free tow truck" highlight) ---- */
  --color-signal: #e8a33d;
  --color-signal-soft: #fbeed9;

  /* ---- Color: feedback ---- */
  --color-success: #2e7d4f;
  --color-error: #c4302b;

  /* ---- Typography ---- */
  --font-display: 'Unbounded', sans-serif;   /* headlines - bold, geometric */
  --font-body: 'Manrope', sans-serif;        /* body copy, UI labels */
  --font-mono: 'IBM Plex Mono', monospace;   /* data: price, phone, plate, year */

  --fs-display-xl: clamp(2.5rem, 4.5vw + 1rem, 4.5rem);
  --fs-display-lg: clamp(2rem, 3vw + 1rem, 3rem);
  --fs-display-md: clamp(1.5rem, 1.5vw + 1rem, 2.125rem);
  --fs-body-lg: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  /* ---- Spacing scale (8px base) ---- */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4rem;     /* 64px */
  --space-7: 6rem;     /* 96px */
  --space-8: 8rem;     /* 128px */

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Shadow (subtle, never harsh) ---- */
  --shadow-sm: 0 1px 2px rgba(20, 21, 26, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 21, 26, 0.08);
  --shadow-lg: 0 20px 48px rgba(20, 21, 26, 0.12);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 560ms;
}