/* ============================================================
   tokens.css - LE fichier à remplacer pour réhabiller un site.

   C'est le seul endroit du projet où figurent des valeurs
   littérales (couleurs, tailles, polices). layout.css ne
   consomme que les variables déclarées ici : tant qu'un thème
   redéfinit ce contrat, il peut changer l'apparence complète
   du site sans toucher au HTML ni à la structure CSS.

   Contrat à respecter par tout thème :
     couleurs   --couleur-fond, --couleur-fond-alt, --couleur-surface,
                --couleur-texte, --couleur-texte-doux, --couleur-titre,
                --couleur-accent, --couleur-accent-contraste,
                --couleur-accent-survol, --couleur-bordure, --couleur-focus
     polices    --police-corps, --police-titres, --police-mono
     graisses   --graisse-normale, --graisse-moyenne, --graisse-forte
     tailles    --taille-xs … --taille-4xl
     interlignes --interligne-serre, --interligne-normal, --interligne-large
     espaces    --espace-3xs … --espace-4xl
     rayons     --rayon-xs, --rayon-s, --rayon-m, --rayon-l, --rayon-pilule
     ombres     --ombre-s, --ombre-m
     largeurs   --largeur-contenu, --largeur-texte, --largeur-etroite
     mouvement  --transition-rapide, --transition-normale
     bordures   --epaisseur-trait, --epaisseur-focus
   ============================================================ */

:root {
	color-scheme: light dark;

	/* --- Couleurs (thème clair) ------------------------------ */
	--couleur-fond: #ffffff;
	--couleur-fond-alt: #f4f5f7;
	--couleur-surface: #ffffff;
	--couleur-texte: #1f2328;
	--couleur-texte-doux: #55606b;
	--couleur-titre: #10141a;
	--couleur-accent: #1c5d99;
	--couleur-accent-survol: #14456f;
	--couleur-accent-contraste: #ffffff;
	--couleur-bordure: #d8dce1;
	--couleur-focus: #1c5d99;

	/* --- Typographie ----------------------------------------- */
	/* Piles système : aucune requête réseau, donc aucun transfert
	   d'adresse IP vers un tiers (voir docs/POLICES.md). */
	--police-corps: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
		Arial, sans-serif;
	--police-titres: var(--police-corps);
	--police-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;

	--graisse-normale: 400;
	--graisse-moyenne: 500;
	--graisse-forte: 700;

	/* Échelle fluide : la taille s'adapte à la largeur du viewport
	   sans point de rupture, donc sans saut de mise en page. */
	--taille-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
	--taille-s: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
	--taille-m: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--taille-l: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
	--taille-xl: clamp(1.375rem, 1.24rem + 0.66vw, 1.75rem);
	--taille-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
	--taille-3xl: clamp(2.125rem, 1.7rem + 2.1vw, 3.5rem);
	--taille-4xl: clamp(2.5rem, 1.9rem + 3vw, 4.5rem);

	--interligne-serre: 1.15;
	--interligne-normal: 1.6;
	--interligne-large: 1.8;

	/* --- Espacements ----------------------------------------- */
	--espace-3xs: 0.25rem;
	--espace-2xs: 0.5rem;
	--espace-xs: 0.75rem;
	--espace-s: 1rem;
	--espace-m: 1.5rem;
	--espace-l: 2rem;
	--espace-xl: 3rem;
	--espace-2xl: 4rem;
	--espace-3xl: 5.5rem;
	--espace-4xl: 7rem;

	/* --- Formes ---------------------------------------------- */
	--rayon-xs: 0.125rem;
	--rayon-s: 0.25rem;
	--rayon-m: 0.5rem;
	--rayon-l: 1rem;
	--rayon-pilule: 100vmax;

	--epaisseur-trait: 1px;
	--epaisseur-focus: 3px;

	--ombre-s: 0 1px 2px rgb(16 20 26 / 8%);
	--ombre-m: 0 4px 16px rgb(16 20 26 / 10%);

	/* --- Dimensions ------------------------------------------ */
	--largeur-contenu: 72rem;
	--largeur-texte: 42rem;
	--largeur-etroite: 34rem;

	/* --- Mouvement ------------------------------------------- */
	--transition-rapide: 120ms ease;
	--transition-normale: 240ms ease;
}

/* Thème sombre automatique, piloté par la préférence système.
   Aucun sélecteur JS, aucun stockage local : rien à mémoriser. */
@media (prefers-color-scheme: dark) {
	:root {
		--couleur-fond: #14181d;
		--couleur-fond-alt: #1b2027;
		--couleur-surface: #1f252d;
		--couleur-texte: #e4e8ec;
		--couleur-texte-doux: #a8b2bd;
		--couleur-titre: #f6f8fa;
		--couleur-accent: #7fb3e3;
		--couleur-accent-survol: #a6cbef;
		--couleur-accent-contraste: #10141a;
		--couleur-bordure: #333c47;
		--couleur-focus: #7fb3e3;

		--ombre-s: 0 1px 2px rgb(0 0 0 / 40%);
		--ombre-m: 0 4px 16px rgb(0 0 0 / 50%);
	}
}

/* Contraste renforcé : on durcit bordures et texte doux. */
@media (prefers-contrast: more) {
	:root {
		--couleur-texte-doux: var(--couleur-texte);
		--couleur-bordure: var(--couleur-texte);
		--epaisseur-trait: 2px;
	}
}