/*
 * Tokens visuels — direction littéraire validée (maquette, septembre 2026).
 *
 * Valeurs reprises telles quelles de la fiche technique. Rien ne doit être
 * codé en dur ailleurs dans le thème : toute couleur, taille ou espacement
 * passe par une de ces variables, afin qu’un ajustement de la direction
 * artistique se fasse ici et nulle part ailleurs.
 */

:root {
	/* Couleurs */
	--color-bg: #FDFCF8;
	--color-ink: #1B1719;
	--color-text: #241F21;
	--color-text-secondary: #3A3335;
	--color-text-muted: #5C554C;
	--color-accent: #A31E22;
	--color-rule: #DED8CE;
	--color-rule-soft: #D6CFC3;
	--color-accent-underline: #E8CBC8;
	--color-surface: #F5F0E7;
	--color-surface-alt: #F4EEE6;
	--color-selection: #F5DEDA;

	/* Typographie */
	--font-display: 'Cormorant Garamond', Garamond, serif;
	--font-body: 'EB Garamond', Garamond, serif;
	--font-ui: 'Jost', 'Helvetica Neue', sans-serif;

	--fs-h1-home: clamp(52px, 8vw, 104px);
	--fs-h1: clamp(40px, 6vw, 76px);
	--fs-h1-revue: clamp(36px, 4.6vw, 56px);
	--fs-subtitle: clamp(19px, 2.6vw, 30px);
	--fs-h2: 30px;
	--fs-h3: 23px;
	--fs-body: 19.5px;
	--fs-body-sm: 17px;
	--fs-meta: 15px;
	--fs-nav: 17px;
	--fs-label: 13px;

	/*
	 * Échelons intermédiaires confirmés par la maquette. La fiche technique les
	 * donnait en fourchettes (« 12,5–14px selon niveau », « 15–16px ») ; la
	 * maquette tranche par emploi, d’où des noms de rôle plutôt que de taille.
	 */
	--fs-etiquette: 12px;    /* étiquettes de métadonnées, sous-titres de série */
	--fs-action: 12.5px;     /* bouton bordé, liens PDF, liens de colonne */
	--fs-rubrique: 14px;     /* étiquette de rubrique dans un sommaire */
	--fs-donnee: 16px;       /* valeurs de métadonnées, crédits, numéros */
	--fs-editorial: 34px;    /* titre propre de l’éditorial */

	--fw-thin: 300;   /* réservé au H1 d’accueil */
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;   /* titres d’entrée de sommaire */

	--lh-display: 1.02;
	--lh-heading: 1.3;
	--lh-body: 1.65;
	--lh-body-sm: 1.55;

	--ls-label: 0.22em;
	--ls-label-sm: 0.14em;
	--ls-nav: 0.02em;
	--ls-rubrique: 0.2em;    /* rubrique de sommaire, titre de colonne */
	--ls-action: 0.16em;     /* bouton bordé */
	--ls-etiquette: 0.12em;  /* étiquettes de métadonnées */

	/* Mise en page */
	--container-max: 1120px;
	/*
	 * Mesure de lecture, en pixels et non en ch : ch dépend du corps de
	 * l’élément qui la porte, si bien qu’un titre à 64px recevait 2259px et un
	 * texte à 19,5px 693px. Une seule valeur, la même partout où elle s’applique
	 * — texte courant, chapeau, barre d’onglets, titre d’une page de texte.
	 * 720px ≈ 97 caractères par ligne en EB Garamond 19,5px.
	 */
	--measure: 720px;
	--page-margin: 32px;
	--page-margin-mobile: 22px;
	--space-xs: 8px;
	--space-sm: 16px;
	--space-md: 24px;
	--space-lg: 40px;
	--space-xl: 56px;
	--space-section: clamp(48px, 7vw, 104px);
	--sticky-top: 28px;      /* décalage des colonnes collantes */

	/* Filets */
	--rule: 1px solid var(--color-rule);
	--rule-accent: 2px solid var(--color-accent);
}

/*
 * Marge latérale réduite sous 640px (fiche technique §3).
 * Déclarée ici plutôt que dispersée : --page-margin est la seule marge de page.
 */
@media (max-width: 640px) {
	:root {
		--page-margin: var(--page-margin-mobile);
	}
}