/* =========================================================
   tokens.css — LA source de vérité du branding.

   Toute page du site, présente ou future, charge ce fichier
   AVANT styles.css et n'y redéfinit jamais de couleur, de
   police ni de rayon en dur : elle consomme uniquement ces
   variables. Changer l'identité du site = changer ce fichier.
   ========================================================= */

/* --- Polices, auto-hébergées, licence SIL OFL --- */

/* Display : serif géométrique à terminaisons en boule (titres). */
@font-face {
  font-family: Fraunces;
  src: url("assets/fonts/fraunces-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Texte courant : sans-serif neutre. */
@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/space-grotesk-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Couleurs --- */
  --page:     #f4f1ea;   /* fond crème chaud, jamais blanc pur */
  --page-top: #faf8f3;   /* haut de page, dégradé très discret */
  --banner:   #ece7dc;   /* bannière réservée, crème plus profond */
  --surface:  #ffffff;   /* fond des cartes et des blocs de contenu */
  --ink:      #1c1915;   /* texte principal, noir cassé chaud */
  --muted:    #6b6459;   /* texte secondaire — 5.18:1 sur le crème */
  --rule:     #ddd6c9;   /* hairlines chaudes, 1px partout */
  --accent:   #1f2ae0;   /* SEULE couleur saturée : Free + état de lecture */
  --on-ink:   #ffffff;   /* texte sur fond encre */

  /* --- Typographie --- */
  --font-display: Fraunces, Georgia, "Times New Roman", serif;
  --font-text:    "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

  /* Axes variables de Fraunces : rondeur et terminaisons en boule.
     --display-lg pour les grands titres, --display-sm pour les petits. */
  --display-lg: "opsz" 144, "SOFT" 60, "WONK" 1;
  --display-sm: "opsz" 72, "SOFT" 60, "WONK" 1;

  /* --- Rayons --- */
  --r-pill: 999px;       /* boutons et commandes : pilule */
  --r-card: 20px;        /* cartes et grands blocs */

  /* --- Espacements --- */
  --gutter: clamp(1rem, 4vw, 2.5rem);    /* marge latérale des pages */
  --gap:    clamp(0.875rem, 1.6vw, 1.25rem); /* entre cartes */
  --pad:    clamp(1.5rem, 5vw, 3rem);    /* intérieur des blocs de contenu */
  --flow:   clamp(2.5rem, 8vw, 5rem);    /* respiration entre sections */

  /* --- Largeurs --- */
  --w-grid:    75rem;    /* grille produits */
  --w-hero:    52rem;    /* hero */
  --w-reading: 38rem;    /* colonne de lecture : ~70 caractères */

  /* --- Cadre technique --- */
  --tick:        12px;   /* longueur des équerres d'angle */
  --tick-offset: -5px;   /* débord par rapport au filet */
}