/*
 * Raccourcis de design.
 * Les VALEURS se changent dans theme.json (couleurs, polices, tailles) :
 * ces variables y renvoient, donc tout le site suit automatiquement.
 * Seuls les réglages absents de theme.json (rythme, animations, header) sont définis ici.
 */
:root {
	/* Couleurs (theme.json → settings.color.palette) */
	--c-night: var(--wp--preset--color--night);
	--c-night-2: var(--wp--preset--color--night-2);
	--c-cream: var(--wp--preset--color--cream);
	--c-cream-2: var(--wp--preset--color--cream-2);
	--c-paper: var(--wp--preset--color--paper);
	--c-ink: var(--wp--preset--color--ink);
	--c-amber: var(--wp--preset--color--amber);
	--c-amber-light: var(--wp--preset--color--amber-light);
	--c-amber-ink: var(--wp--preset--color--amber-ink);
	--c-sand: var(--wp--preset--color--sand);
	--c-sand-deep: var(--wp--preset--color--sand-deep);

	/* Polices (theme.json → settings.typography.fontFamilies) */
	--f-sans: var(--wp--preset--font-family--sans);
	--f-serif: var(--wp--preset--font-family--serif);
	--f-display: var(--wp--preset--font-family--display);
	/* Typographie éditoriale (Newsreader) : paragraphes, chapeaux, petits libellés. */
	--fs-body: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
	--fs-lead: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
	--fs-label: 0.8125rem;

	/* Mise en page */
	--container: 80rem;
	--container-narrow: 45rem;
	--gutter: clamp(1rem, 3vw, 2.5rem);
	/* Espace haut / bas des sections de l'accueil (deux sections voisines : 2 × cette valeur). */
	--section-pad: clamp(3rem, 6vw, 5.5rem);
	--section-pad-tight: clamp(2rem, 3.5vw, 3rem);
	--header-h: 4rem;

	/* Animations */
	--ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
	--dur: 0.4s;
}

@media (min-width: 64rem) {
	:root {
		--header-h: 5rem;
	}
}