/* =========================================================================
   ZAUTO · variables.css · Design tokens
   Palette dérivée du logo ZAUTO : bleu roi -> marine (swoosh) + anthracite.
   ========================================================================= */

:root {
  /* --- Couleurs de marque (logo ZAUTO) --- */
  --blue-400: #5a9ad8;  /* optimisé contraste sur fond sombre */
  --blue-500: #2a69b2;   /* bleu roi, accent principal */
  --blue-600: #1f5aa0;
  --blue-700: #263f8b;   /* bleu profond (dégradés) */
  --blue-800: #25346f;   /* marine */
  --blue-900: #262452;   /* marine très foncé */

  --ink-900: #14181f;    /* fond sombre principal */
  --ink-800: #1b2029;
  --ink-700: #2b2f34;    /* anthracite du wordmark */

  /* --- Neutres --- */
  --white:    #ffffff;
  --off-white:#f5f7fb;   /* section claire alternée */
  --grey-100: #eef1f6;
  --grey-200: #e0e5ee;
  --grey-300: #cfd6e2;
  --grey-500: #5e6a7d;   /* texte secondaire – contraste AA sur off-white */
  --grey-700: #3a4150;
  --ink:      #131720;   /* texte principal */

  /* --- Sémantique --- */
  --bg:        var(--white);
  --bg-dark:   var(--ink-900);
  --text:      var(--ink);
  --text-muted:var(--grey-500);
  --text-on-dark: #dbe3f0;
  --border:    var(--grey-200);
  --accent:    var(--blue-500);
  --accent-ink:var(--blue-700);

  /* --- Dégradés signature (rappel du swoosh) --- */
  --grad-blue: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 55%, var(--blue-800) 100%);
  --grad-dark: linear-gradient(135deg, var(--ink-800) 0%, var(--blue-900) 100%);

  /* --- Typographie ---
     Titres : Sora (grotesque géométrique). Texte : Manrope. */
  --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, 5.6vw, 4.6rem);
  --fs-h2:   clamp(1.75rem, 3.4vw, 2.7rem);
  --fs-h3:   clamp(1.2rem, 2vw, 1.55rem);
  --fs-lead: clamp(1.02rem, 1.4vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small:0.85rem;

  --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: 1320px;
  --container-narrow: 1080px;
  --gutter: 2rem;

  /* --- Rayons & ombres --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(19, 32, 60, 0.07);
  --shadow-md: 0 14px 36px rgba(19, 32, 60, 0.12);
  --shadow-lg: 0 28px 64px rgba(19, 32, 60, 0.18);
  --shadow-blue: 0 16px 34px rgba(42, 105, 178, 0.28);

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

  --header-h: 78px;
}