/* ============================================================
   CALCULSUBVENTION. Tokens de design
   Base : systeme Visual (designstripe.com), extrait via Refero
   « Warm editorial zine. Cream paper. »

   Adaptations assumees :
   - Serif : Instrument Serif (Google Fonts, gratuite)
   - Mono  : JetBrains Mono (Google Fonts, gratuite)
   - Le mono est reserve aux etiquettes, boutons et metadonnees.
     Le texte a LIRE est en serif ou en sans. Visual met du mono
     partout, mais le lecteur ici a 55-70 ans et du mono a 16px
     le fatigue.
   ============================================================ */

:root {

  /* ---------- SURFACES ---------- */
  --velin:   #f6f6f4;  /* fond de page : le creme qui donne toute la temperature */
  --papier:  #ffffff;  /* cartes, panneaux eleves */
  --carbone: #2c2c26;  /* noir chaud : boutons pleins, pied de page. LE seul bouton plein du systeme */
  --os:      #e8e7d9;  /* teinte chaude subtile : fonds d'etiquettes, lavis doux */

  /* ---------- TEXTE ET TRAITS ---------- */
  --encre:   #000000;  /* texte principal, bordures structurelles lourdes */
  --olive:   #57584b;  /* bordures structurelles moyennes, separateurs entre sections */
  --lichen:  #6d6e5e;  /* texte de corps, paragraphes attenues */
  --sauge:   #979886;  /* etiquettes d'interface attenuees */
  --mousse:  #aaab9c;  /* traits d'icones, texte tertiaire */
  --cendre:  #d0d0c8;  /* filets fins, contours de cartes */

  /* ---------- L'ACCENT ---------- */
  /* Jaune surligneur. Apparait 3 a 4 fois MAXIMUM par page,
     toujours en trait de 4-6px ou en petit bloc de remplissage.
     Jamais en grande surface, jamais en couleur de texte. */
  --surligneur: #fff347;
  --kaki:       #aaa674;  /* le frere sobre : contours d'etiquettes, boutons secondaires */

  /* ---------- POLICES ---------- */
  /* Fraunces : https://fonts.google.com/specimen/Fraunces
     JetBrains Mono : https://fonts.google.com/specimen/JetBrains+Mono
     Fraunces remplace Instrument Serif : cette derniere a un contraste
     trop eleve et ses delies fins fatiguent un lecteur de 55 a 70 ans. */
  --serif: 'Fraunces', ui-serif, Georgia, Cambria, 'Times New Roman', serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:  system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --poids-leger:  300;
  --poids-normal: 400;
  --poids-moyen:  500;
  --poids-titre:  600;   /* Fraunces : les titres portent par la graisse, pas par le delie */

  --ls-titres: -0.028em;  /* tracking commun a tous les titres */

  /* ---------- ECHELLE TYPOGRAPHIQUE ---------- */
  /* La signature du systeme : graisse 300 a taille d'affiche.
     Des traits fins a grande echelle donnent de l'autorite par
     la retenue, pas par le volume. Tracking tres serre partout. */

  --t-display:   96px;  --lh-display:   0.94;  --ls-display:   -4.8px;  /* serif 400 */
  --t-titre-xl:  64px;  --lh-titre-xl:  1.00;  --ls-titre-xl:  -3.2px;  /* serif 300 */
  --t-titre-lg:  48px;  --lh-titre-lg:  1.13;  --ls-titre-lg:  -2.4px;  /* serif 300 */
  --t-titre:     32px;  --lh-titre:     1.00;  --ls-titre:     -1.6px;  /* serif 400 */
  --t-titre-sm:  24px;  --lh-titre-sm:  1.13;  --ls-titre-sm:  -1.2px;  /* serif 400 */
  --t-sous:      20px;  --lh-sous:      1.50;  --ls-sous:      -0.5px;
  --t-corps:     16px;  --lh-corps:     1.50;  --ls-corps:     -0.4px;
  --t-petit:     14px;  --lh-petit:     1.41;  --ls-petit:     -0.4px;
  --t-micro:     12px;  --lh-micro:     1.33;  --ls-micro:      0.5px;  /* mono, majuscules */

  /* ---------- ESPACEMENT ---------- */
  --e-4:   4px;
  --e-8:   8px;
  --e-12:  12px;
  --e-16:  16px;
  --e-24:  24px;
  --e-32:  32px;
  --e-64:  64px;
  --e-80:  80px;
  --e-128: 128px;

  /* ---------- RAYONS ---------- */
  /* Tres petits. C'est du papier, pas des pilules. */
  --r-boutons: 3px;
  --r-tags:    3px;
  --r-nav:     3px;
  --r-cartes:  8px;

  /* ---------- MISE EN PAGE ---------- */
  --largeur-max: 1200px;
  --gap-section:  80px;
  --pad-carte:    24px;
  --gap-element:   8px;

  /* AUCUNE ombre dans ce systeme. AUCUN degrade.
     Les surfaces se separent par le contraste de fond et les filets. */

  /* ---------- MOUVEMENT ---------- */
  --duree-rapide: 120ms;
  --duree-moyenne: 200ms;
  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 768px) {
  :root {
    --t-display:  52px;  --lh-display:  0.98;  --ls-display:  -2.4px;
    --t-titre-xl: 40px;  --lh-titre-xl: 1.04;  --ls-titre-xl: -1.8px;
    --t-titre-lg: 34px;  --lh-titre-lg: 1.10;  --ls-titre-lg: -1.4px;
    --t-titre:    26px;                        --ls-titre:    -1.1px;
    --t-titre-sm: 21px;                        --ls-titre-sm: -0.9px;
    --t-sous:     18px;
    --gap-section: 48px;
    --pad-carte:   20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duree-rapide: 1ms; --duree-moyenne: 1ms; }
}