/* ============================================================
   VESTLAND — Design tokens (Phase 3)
   Source de vérité visuelle. Aucune couleur/taille en dur ailleurs :
   les composants de styles.css ne consomment que ces variables.
   Référence : docs/REFERENCE-SURMESUR.md
   ============================================================ */

:root {
  /* ----- Couleurs ----- */
  --couleur-encre: #111111;        /* texte principal, boutons pleins */
  --couleur-noir: #000000;
  --couleur-blanc: #ffffff;
  --couleur-fond: #ffffff;
  --couleur-fond-doux: #f7f6f3;    /* sections alternées, fond photo produit */
  --couleur-gris-700: #444444;
  --couleur-gris-500: #6b6b6b;     /* texte secondaire */
  --couleur-gris-300: #b9b9b9;
  --couleur-gris-200: #e4e2dd;     /* bordures, filets */
  --couleur-gris-100: #f1efea;
  --couleur-or: #d4af37;           /* accent signature VESTLAND — usage rare */
  --couleur-erreur: #a3392f;
  --couleur-succes: #2f6b3a;

  /* Badges de statut (machine à états) */
  --statut-attente-fond: #f4ecd8;  --statut-attente-texte: #7a5c12;
  --statut-actif-fond: #e3ecf5;    --statut-actif-texte: #274d6d;
  --statut-pret-fond: #e4f0e6;     --statut-pret-texte: #2f6b3a;
  --statut-fini-fond: #ececec;     --statut-fini-texte: #555555;
  --statut-annule-fond: #f6e3e0;   --statut-annule-texte: #a3392f;

  /* ----- Typographie (refonte : grotesque MAJUSCULES, fidèle à surmesur) ----- */
  --police-titres: 'Archivo', 'Inter', 'Segoe UI', sans-serif;
  --police-texte: 'Inter', 'Segoe UI', sans-serif;

  --texte-xs: 0.75rem;     /* 12px — surtitres, mentions, noms de carte */
  --texte-sm: 0.875rem;    /* 14px — nav, boutons */
  --texte-base: 1rem;      /* 16px */
  --texte-lg: 1.125rem;    /* 18px — chapeaux */
  --titre-sm: 1.25rem;     /* 20px — titres de bloc */
  --titre-md: clamp(1.75rem, 3.4vw, 2.75rem);  /* titres de section */
  --titre-lg: clamp(2.25rem, 4.5vw, 3.5rem);   /* titres majeurs */
  --titre-page: clamp(2.75rem, 6vw, 4.5rem);   /* titre de page catalogue */
  --titre-hero: clamp(3rem, 7.5vw, 5.5rem);    /* héros accueil */

  /* Les grands titres grotesques se serrent, les petites capitales s'espacent */
  --interlettre-titre: -0.015em;
  --interlettre-nav: 0.08em;
  --interlettre-surtitre: 0.22em;
  --interlettre-bouton: 0.12em;

  /* ----- Espacements ----- */
  --espace-1: 0.25rem;
  --espace-2: 0.5rem;
  --espace-3: 0.75rem;
  --espace-4: 1rem;
  --espace-5: 1.5rem;
  --espace-6: 2rem;
  --espace-7: 3rem;
  --espace-8: 4.5rem;
  --espace-section: clamp(3.5rem, 8vw, 6.5rem);

  /* ----- Mise en page ----- */
  --largeur-page: 1240px;
  --largeur-texte: 640px;
  --marge-page: clamp(1rem, 4vw, 2.5rem);

  /* ----- Détails ----- */
  --rayon: 0px;                    /* surmesur : angles nets */
  --rayon-badge: 2px;
  --ombre-carte: 0 10px 30px rgba(17, 17, 17, 0.07);
  --transition: 0.25s ease;
  --ratio-produit: 3 / 4;          /* images produit portrait */
}