/* tokens.css — Variables de design (couleurs, typo, rayons, ombres).
   ADN de marque : rose #FF4F9D + teal #9ED9DF sur crème. */

/* ======================================================================
   OTRAH — Aperçu v2 · direction « futuriste chaleureux / lumineux »
   ADN préservé : rose #FF4F9D + teal #9ED9DF, sur crème.
   Typo : Syne (titres) · Space Grotesk (texte) · Space Mono (données).
   Signature : aurora rose→teal + surfaces « verre » + grille technique.
====================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --creme:      #FBF6F1;
  --creme-2:    #F4EBE3;
  --encre:      #1E1820;
  --encre-2:    #2A2230;
  --encre-doux: #6C616B;
  --rose:       #FF4F9D;
  --rose-prof:  #C9377B;
  --teal:       #9ED9DF;
  --teal-prof:  #2E7C85;
  --wash-rose:  #FBE6F0;
  --wash-teal:  #E6F4F5;
  --ligne:      #E9DCD2;
  --verre:      rgba(255,255,255,.58);
  --verre-bord: rgba(255,255,255,.75);

  --display: 'Montserrat', system-ui, sans-serif;
  --corps:   'Poppins', system-ui, -apple-system, sans-serif;
  --mono:    'Poppins', system-ui, sans-serif;

  --rayon:    16px;
  --rayon-lg: 28px;
  --rayon-xl: 40px;
  --ombre:    0 24px 60px -30px rgba(46,20,40,.42);
  --ombre-sm: 0 10px 30px -18px rgba(46,20,40,.3);
  --deg:      linear-gradient(90deg, var(--rose), var(--teal));
  --deg-135:  linear-gradient(135deg, var(--rose) 5%, #d98fc4 45%, var(--teal) 95%);
  --t: .5s cubic-bezier(.2,.7,.2,1);
  --max: 1180px;
}