/* Tokens Auto Home Services — tirés des flyers du client (bleu marine + jaune) et du granit creusois. */
:root {
  --navy: #0E1B3A;
  --navy-2: #16274F;
  --navy-deep: #08122A;
  --yellow: #FFC21A;
  --yellow-soft: #FFE08A;
  --red: #E5352B;          /* repris des prix « À partir de » des flyers, réservé à l'étiquette Avant */
  --granite: #F3F0E9;      /* fond chaud, pierre claire */
  --granite-2: #E7E2D6;
  --ink: #0B1124;
  --muted: #59607A;

  --color-bg: var(--granite);
  --color-surface: #ffffff;
  --color-text: var(--ink);
  --color-text-muted: var(--muted);
  --color-accent: var(--navy);
  --color-line: rgba(14, 27, 58, 0.14);
  --color-on-accent: #ffffff;

  --font-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(0.84rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.18rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
  --step-4: clamp(2.4rem, 1.6rem + 4vw, 5rem);
  --step-5: clamp(3rem, 1.6rem + 7vw, 8.5rem);

  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --space-xl: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --space-2xl: clamp(5rem, 3rem + 9vw, 11rem);

  --container: 80rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --radius: 14px;          /* même rayon que le pictogramme du logo */
  --radius-s: 8px;
  --skew: -18deg;          /* l'oblique des bandes des flyers */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 800ms;
  --header-h: 72px;
}