/* =========================================================
   AutoBac66 — Design System
   Toute décision visuelle du site vit ici.
   Changer l'identité = changer ce fichier uniquement.
   ========================================================= */

:root {
  /* --- Couleurs de marque --- */
  --color-black: #08090a;
  --color-graphite-900: #0e1113;
  --color-graphite-800: #15181b;
  --color-graphite-700: #1d2124;
  --color-graphite-600: #2b3034;
  --color-graphite-400: #767d84;
  --color-graphite-200: #c9cfd4;

  --color-accent: #e0221b;
  --color-accent-dark: #b71a15;
  --color-accent-soft: rgba(224, 34, 27, 0.10);

  /* --- Fonds --- */
  --bg-dark: var(--color-graphite-900);
  --bg-dark-soft: var(--color-graphite-800);
  --bg-light: #f2f1ef;
  --bg-light-alt: #faf9f7;

  /* --- Voile photo (lisibilité) --- */
  --scrim: linear-gradient(90deg, rgba(8, 9, 10, 0.94) 0%, rgba(8, 9, 10, 0.82) 34%, rgba(8, 9, 10, 0.42) 68%, rgba(8, 9, 10, 0.55) 100%);
  --scrim-soft: linear-gradient(180deg, rgba(8, 9, 10, 0.15), rgba(8, 9, 10, 0.55));

  /* --- Texte --- */
  --text-on-dark: #f4f5f6;
  --text-on-dark-muted: #9aa2a9;
  --text-primary: #15181b;
  --text-secondary: #5b646b;

  /* --- Lignes --- */
  --line-dark: rgba(255, 255, 255, 0.09);
  --line-light: rgba(20, 23, 26, 0.10);

  /* --- Typographie --- */
  --font-sans: "Helvetica Neue", "Segoe UI", Inter, Arial, sans-serif;
  --font-display: var(--font-sans);

  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.075rem;
  --fs-lg: clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  --fs-h1: clamp(2.25rem, 5.2vw, 3.9rem);

  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.65;

  --ls-tight: -0.02em;
  --ls-eyebrow: 0.14em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* --- Espacements --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --section-y: clamp(3.5rem, 7.5vw, 6.5rem);
  --section-y-sm: clamp(2.75rem, 5vw, 4.25rem);

  /* --- Layout --- */
  --container: 1280px;
  --container-narrow: 880px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 92px;      /* capsule 68px + marges */
  --header-h-scrolled: 84px;

  /* --- Rayons --- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* --- Ombres : une seule famille, diffuse et discrète --- */
  --shadow-xs: 0 1px 2px rgba(8, 9, 10, 0.06);
  --shadow-sm: 0 6px 18px rgba(8, 9, 10, 0.10);
  --shadow-md: 0 14px 38px rgba(8, 9, 10, 0.16);
  --shadow-dark: 0 18px 44px rgba(0, 0, 0, 0.38);

  /* --- Animation --- */
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 460ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Divers --- */
  --z-header: 100;
  --z-menu: 200;
}