/* ============================================================
   Reeloq — jetons de design
   Couleurs relevées dans le logo. Aucune valeur inventée.
   Ce fichier est la seule source de vérité : rien de codé en dur ailleurs.
   ============================================================ */

:root{
  /* --- marque, extraites du SVG --- */
  --brun:            #3C2C1F;
  --brun-profond:    #2A1E15;
  --brun-clair:      #4E3A2A;
  --brun-surface:    #5C4634;
  --terre:           #A9643B;
  --terre-clair:     #C88355;
  --terre-sombre:    #8A4E2C;
  --creme:           #E4D8C9;
  --creme-pale:      #F5F1EA;
  --sable:           #9A8B7A;

  /* --- statuts, dérivés pour rester dans la famille chaude --- */
  --succes:   #5E8C61;
  --attente:  #C9A227;
  --alerte:   #B4472F;
  --neutre:   #7A6E62;

  /* --- rôles sémantiques : on utilise ceux-ci, pas les couleurs brutes --- */
  --fond:            var(--creme-pale);
  --fond-alt:        #EAE3D8;
  --surface:         #FFFFFF;
  --texte:           var(--brun);
  --texte-doux:      #6B5B4B;
  --texte-faible:    var(--sable);
  --bordure:         rgba(60,44,31,.14);
  --bordure-forte:   rgba(60,44,31,.28);
  --accent:          var(--terre);
  --accent-texte:    #FFFFFF;

  /* --- typographie --- */
  --f-titre: 'Fraunces', 'Instrument Serif', Georgia, serif;
  --f-texte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-chiffre: 'Inter', system-ui, sans-serif;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   clamp(1.25rem, 1.6vw, 1.5rem);
  --t-xl:   clamp(1.75rem, 3vw, 2.5rem);
  --t-2xl:  clamp(2.25rem, 5vw, 4rem);
  --t-3xl:  clamp(3rem, 8vw, 6rem);

  /* --- espacement, échelle de 4 px --- */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;     --e-8: 4rem;
  --e-9: 6rem;     --e-10: 8rem;

  /* --- structure --- */
  --largeur: 1200px;
  --gouttiere: clamp(1.25rem, 5vw, 3.5rem);
  --rayon:    4px;
  --rayon-lg: 10px;

  /* --- ombres, teintées de brun plutôt que de noir --- */
  --ombre-1: 0 1px 2px rgba(60,44,31,.06);
  --ombre-2: 0 4px 16px rgba(60,44,31,.09);
  --ombre-3: 0 18px 48px rgba(60,44,31,.16);

  /* --- mouvement --- */
  --transition: .24s cubic-bezier(.2,.7,.3,1);
}

/* --- thème sombre : l'ERP et les sections sombres du site --- */
.theme-sombre{
  --fond:          var(--brun-profond);
  --fond-alt:      var(--brun);
  --surface:       var(--brun-clair);
  --texte:         var(--creme);
  --texte-doux:    #C3B5A4;
  --texte-faible:  var(--sable);
  --bordure:       rgba(228,216,201,.14);
  --bordure-forte: rgba(228,216,201,.3);
  --accent:        var(--terre-clair);
  --accent-texte:  var(--brun-profond);

  /* Indispensable. `body` a résolu `color: var(--texte)` une fois pour
     toutes en brun ; les enfants héritent de cette couleur calculée, pas de
     la variable. Sans cette ligne, redéfinir --texte ici ne change rien et
     les titres restent bruns sur fond brun — donc invisibles. */
  color: var(--texte);
}

@media (prefers-reduced-motion: reduce){
  :root{ --transition: .01ms; }
}