/* ============================================================
   tokens.css — variables de design (identiques pour tous les clients)
   Typographie : Schibsted Grotesk (SIL OFL 1.1), auto-hébergée.
   ============================================================ */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/SchibstedGrotesk-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Couleurs : fond papier, texte presque noir, un seul accent */
  --paper:      #F4F2ED;
  --ink:        #141412;
  --ink-2:      #5C5A55;   /* 6,2:1 sur le papier */
  --rule:       #141412;
  --rule-soft:  #CFCBC2;
  --accent:     #1E4535;   /* repli : le ton de l'aplat de la palette choisie */
  --error:      #B3261E;   /* messages d'erreur seulement (rouge fonctionnel, 5,9:1 sur le papier) */
  --img-bg:     #E4E1DA;

  /* Palette v2 : un aplat fort (chiffres, contact, pied de page), un fond doux pour alterner.
     Deux options, choisies par site.palette dans data.js. Contrastes : node scripts/contrast.mjs */
  /* palette:vert */
  --strong:       #1E4535;   /* vert profond */
  --accent:       #1E4535;   /* liens, survols, focus, mot en accent sur fond clair */
  --strong-deep:  #12281F;
  --soft:         #DCE3D3;   /* sauge */
  --hi:           #E6CF9A;   /* surlignage sur aplat */
  --on-strong:    #F4F2ED;
  --on-strong-2:  #BFCDBF;
  --deep-rgb:     18 40 31;
  /* fin palette:vert */

  /* Grille 12 colonnes */
  --max:        1440px;
  --margin:     40px;
  --gut:        24px;

  /* Typographie */
  --font:       "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(3rem, 8.4vw, 8.5rem);
  --fs-title:   clamp(2.5rem, 6.4vw, 6.5rem);
  --fs-h2:      clamp(1.75rem, 3.2vw, 3rem);
  --fs-lead:    clamp(1.375rem, 2.2vw, 2rem);
  --fs-body:    1.0625rem;
  --fs-small:   .8125rem;

  /* Espacement vertical des sections */
  --section:    clamp(72px, 10vw, 160px);
  --space-l:    clamp(40px, 6vw, 96px);

  /* Mouvement : une courbe, trois durées */
  --ease:       cubic-bezier(.16, 1, .3, 1);
  --d1:         200ms;
  --d2:         600ms;
  --d3:         900ms;
}

@media (max-width: 767px) {
  :root { --margin: 20px; --gut: 16px; }
}

/* Option « terre de Sienne » : l'accent devient le ton de l'aplat */
html[data-palette="sienne"] {
  --strong:       #8A3A1C;   /* terre de Sienne brûlée */
  --strong-deep:  #4A200F;
  --soft:         #EADFC8;   /* sable */
  --hi:           #F2D9A0;
  --on-strong:    #F4F2ED;
  --on-strong-2:  #EBD3C1;
  --accent:       #8A3A1C;
  --deep-rgb:     74 32 15;
}