/* ========================================================================= *
 * tokens.css — Source unique de vérité des design tokens (cf. DESIGN.md §2).  *
 * Ne JAMAIS coder une couleur, un espacement ou un rayon « en dur » ailleurs. *
 * ========================================================================= */

:root {
  /* ---- Couleurs de marque ---- */
  --color-primary:        #0F6FFF;
  --color-primary-600:    #0A57CC;   /* hover boutons */
  --color-primary-050:    #EAF2FF;   /* fonds très clairs */
  --color-accent:         #19D27C;   /* vert impact/éco */
  --color-accent-600:     #13A863;

  /* ---- Neutres ---- */
  --color-text:           #111827;   /* texte principal */
  --color-text-muted:     #4B5563;   /* texte secondaire */
  --color-text-subtle:    #6B7280;   /* légendes */
  --color-bg:             #FFFFFF;
  --color-bg-alt:         #F6F8FB;   /* fond secondaire */
  --color-card:           #FFFFFF;
  --color-border:         rgba(0, 0, 0, .06);
  --color-border-strong:  rgba(0, 0, 0, .12);
  --color-footer-bg:      #0D1117;
  --color-footer-text:    #C9D1D9;

  /* ---- États sémantiques (formulaires) ---- */
  --color-success:        #19D27C;
  --color-error:          #E5484D;
  --color-warning:        #F5A623;

  /* ---- Typographie ---- */
  --font-sans: "Inter Variable", "Inter", system-ui, -apple-system, sans-serif;
  --fw-medium: 500;     /* corps de texte */
  --fw-semibold: 600;   /* sous-titres */
  --fw-bold: 800;       /* titres */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;   /* léger négatif sur les gros titres */

  /* ---- Échelle typographique (fluide, clamp) ---- */
  --fs-display: clamp(2.5rem, 5vw + 1rem, 4.25rem);
  --fs-h1:      clamp(2rem, 3vw + 1rem, 3rem);
  --fs-h2:      clamp(1.6rem, 2vw + 1rem, 2.25rem);
  --fs-h3:      clamp(1.25rem, 1vw + 1rem, 1.5rem);
  --fs-body:    1.0625rem;   /* ~17px */
  --fs-small:   0.9375rem;

  /* ---- Espacement (base 8px) ---- */
  --space-1: 0.5rem;  --space-2: 1rem;   --space-3: 1.5rem;
  --space-4: 2rem;    --space-6: 3rem;   --space-8: 4rem;
  --space-12: 6rem;   --space-16: 8rem;  --space-20: 10rem;
  --section-gap: clamp(4.5rem, 7vw, 7.5rem);   /* ~120px desktop */

  /* ---- Layout ---- */
  --container-max: 1450px;
  --pad-x-desktop: 110px;
  --pad-x-tablet:  60px;
  --pad-x-mobile:  24px;

  /* ---- Rayons ---- */
  --radius-sm: 12px;
  --radius:    16px;   /* boutons */
  --radius-md: 22px;   /* cartes */
  --radius-lg: 30px;   /* carte hero */
  --radius-xl: 32px;   /* bloc CTA */

  /* ---- Ombres (très douces, rares) ---- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-sm: 0 4px 16px rgba(16, 24, 40, .06);
  --shadow-md: 0 12px 32px rgba(16, 24, 40, .08);
  --shadow-glass: 0 8px 40px rgba(15, 111, 255, .10);

  /* ---- Transitions ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur: 0.35s;
  --dur-slow: 0.8s;

  /* ---- Z-index (échelle nommée pour éviter les valeurs magiques) ---- */
  --z-header: 100;
  --z-skip-link: 200;
}