/* ==========================================================================
   variables.css — Design tokens
   Palette inspirée de l'identité Škoda (rebrand « Modern Solid » 2023) :
   vert Émeraude foncé + accents vert électrique.
   ========================================================================== */

:root {
  /* --- Couleurs de marque --- */
  --emerald-900: #0e3a2f;   /* Emerald Green – fond principal sombre */
  --emerald-800: #0a2e26;   /* variante plus profonde */
  --emerald-700: #14483a;
  --emerald-600: #1c5c49;
  --green-electric: #78faae; /* Electric Green – accents lumineux */
  --green-accent: #4ba82e;   /* vert Škoda historique (CTA secondaires) */
  --green-lime: #b4e000;

  /* --- Neutres --- */
  --white: #ffffff;
  --off-white: #f4f6f5;
  --grey-100: #eceeed;
  --grey-200: #d9dddb;
  --grey-300: #b8bebb;
  --grey-500: #6b7370;
  --grey-700: #3a423f;
  --ink: #0b1a15;

  /* --- Couleurs sémantiques --- */
  --bg: var(--white);
  --bg-dark: var(--emerald-900);
  --text: var(--ink);
  --text-muted: #5a625f;
  --text-on-dark: #eaf3ee;
  --border: var(--grey-200);
  --cta: var(--emerald-900);
  --cta-hover: var(--emerald-700);
  --focus: var(--green-electric);

  /* --- Typographie ---
     Škoda utilise la police propriétaire « Škoda Next ».
     Approximation Google Fonts : Sora (titres, géométrique) + Manrope (texte). */
  --font-display: "Sora", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.4rem, 6vw, 5rem);
  --fs-h2: clamp(1.8rem, 3.6vw, 2.9rem);
  --fs-h3: clamp(1.15rem, 2vw, 1.5rem);
  --fs-body: 1rem;
  --fs-small: 0.85rem;

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

  /* --- Espacements --- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 7.5rem;

  --container: 1360px;
  --container-narrow: 1080px;

  /* --- Rayons & ombres --- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(11, 26, 21, 0.08);
  --shadow-md: 0 12px 32px rgba(11, 26, 21, 0.12);
  --shadow-lg: 0 24px 60px rgba(11, 26, 21, 0.18);

  /* --- Transitions --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.35s;

  --header-h: 76px;
}