/* ============================================================
   MON PERSONNEL PARFAIT — 01. TOKENS
   Source unique de vérité : couleurs, typographie, espacements,
   rayons, ombres, durées. Modifier une valeur ici la propage
   sur l'ensemble du site.
   ============================================================ */

:root {
  /* --- Palette de marque (charte MPP) ------------------------ */
  --c-expresso:      #2B1F16;   /* brun profond — texte, fonds sombres */
  --c-champagne:     #C8A86A;   /* or — accent premium, CTA */
  --c-ivoire:        #F7F4EF;   /* fond clair chaleureux */
  --c-sauge:         #7E8C6D;   /* vert sauge — univers candidats */
  --c-taupe:         #D6CBB8;   /* taupe claire — filets, fonds doux */

  /* --- Déclinaisons calculées ------------------------------- */
  --c-expresso-900:  #14100C;   /* noir chaud — footer, sur-fonds */
  --c-expresso-700:  #3A2A1E;
  --c-expresso-500:  #5A473A;   /* texte secondaire sur clair */
  --c-expresso-300:  #7F6E5E;
  --c-champagne-700: #856726;   /* or foncé — texte or lisible sur clair (AA : 5,3:1 sur blanc, 4,8:1 sur ivoire) */
  --c-champagne-300: #E0CBA0;
  --c-sauge-700:     #5F6B51;
  --c-blanc:         #FFFFFF;
  --c-ivoire-2:      #EFEAE1;   /* ivoire plus dense */

  /* --- Rôles sémantiques ------------------------------------ */
  --bg-page:         var(--c-blanc);
  --bg-doux:         var(--c-ivoire);
  --bg-sombre:       var(--c-expresso);
  --bg-nuit:         var(--c-expresso-900);
  --texte:           var(--c-expresso);
  --texte-doux:      var(--c-expresso-500);
  --texte-clair:     #F0EAE1;
  --texte-clair-doux: rgba(240, 234, 225, 0.70);
  --accent:          var(--c-champagne);
  --accent-lisible:  var(--c-champagne-700);

  --filet:           rgba(43, 31, 22, 0.12);
  --filet-fort:      rgba(43, 31, 22, 0.22);
  --filet-clair:     rgba(240, 234, 225, 0.16);

  --etat-succes:     #4C7A52;
  --etat-erreur:     #A8392C;
  --etat-erreur-bg:  #FBF1EF;

  /* --- Typographie ------------------------------------------ */
  --font-titre: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-texte: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Échelle fluide : mobile → desktop, sans palier brutal */
  --t-display: clamp(2.6rem, 1.4rem + 5.2vw, 5.2rem);
  --t-h1:      clamp(2.2rem, 1.3rem + 3.6vw, 4rem);
  --t-h2:      clamp(1.85rem, 1.25rem + 2.4vw, 3rem);
  --t-h3:      clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --t-h4:      clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --t-lead:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --t-base:    1rem;
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;
  --t-eyebrow: 0.75rem;

  --lh-titre:  1.08;
  --lh-texte:  1.72;

  /* --- Rythme d'espacement (base 4px) ----------------------- */
  --e-1:  0.25rem;
  --e-2:  0.5rem;
  --e-3:  0.75rem;
  --e-4:  1rem;
  --e-5:  1.5rem;
  --e-6:  2rem;
  --e-7:  2.5rem;
  --e-8:  3rem;
  --e-9:  4rem;
  --e-10: 5rem;
  --e-11: 6.5rem;

  /* Respiration verticale des sections (fluide) */
  --section-y:      clamp(4rem, 2.5rem + 6vw, 8.5rem);
  --section-y-sm:   clamp(3rem, 2rem + 4vw, 5.5rem);

  /* --- Structure -------------------------------------------- */
  --largeur-max:    1240px;
  --largeur-texte:  68ch;
  --gouttiere:      clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --header-h:       82px;
  --header-h-mob:   68px;

  /* --- Rayons ----------------------------------------------- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-arche: 999px 999px 8px 8px;   /* signature : l'arche / la porte */
  --r-pill: 999px;

  /* --- Ombres (chaudes, jamais grises) ---------------------- */
  --ombre-1: 0 1px 2px rgba(43, 31, 22, 0.05);
  --ombre-2: 0 6px 18px -8px rgba(43, 31, 22, 0.16);
  --ombre-3: 0 18px 44px -18px rgba(43, 31, 22, 0.28);
  --ombre-4: 0 32px 70px -28px rgba(43, 31, 22, 0.38);
  --ombre-or: 0 10px 30px -12px rgba(168, 135, 63, 0.45);

  /* --- Mouvement -------------------------------------------- */
  --d-rapide: 160ms;
  --d-base:   280ms;
  --d-lent:   620ms;
  --easing:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --easing-doux: cubic-bezier(0.4, 0, 0.2, 1);

  --z-header: 100;
  --z-drawer: 200;
  --z-modale: 300;
}