/* ============================================================
   DELTEA · Design Tokens V6
   Source : AGENTS.md section 4 — valeurs figées, zéro invention
   ============================================================ */

:root {
	/* ---------- Couleurs brutes (tokens canoniques) ---------- */
	--obsidienne: #050810;
	--blanc-forge: #F2F0EB;
	--ombre-profonde: #0C111A;
	--pierre-claire: #D8D5CE;

	--graphite-profond: #111827;
	--ardoise: #4B5563;

	/* ---------- Rôles structurels (Livre VIII §VIII.13.7) ---------- */
	--sauge: #5F766A;   /* Sauge Architecturale : structure, signature, liens */
	--cuivre: #8F7654;  /* réservé aux fragilités, jamais décoratif */
	--alerte: #9B4D3A;  /* Alerte Structurelle, usage exceptionnel */

	/* ---------- Schémas / data-viz : Spécification §1.1, validé 06/07 ----------
	   Catégories uniquement, jamais codes sain/fragilité. */
	--bleu-petrole: #3C6478;
	--prune: #6B4A5E;

	/* ---------- Palette des graphiques : kit deltea-identite, Sprint 13 ----------
	   Deux extensions codifiées. Rouge sous réserve, roue jaune/orange/vert non figée. */
	--ext-1: #5C6E7F;
	--ext-2: #745C7F;

	/* ---------- Contrôles ---------- */
	--rayon-controle: 3px;

	/* ---------- Easing ---------- */
	--easing-doux: cubic-bezier(0.22, 1, 0.36, 1);

	/* ============================================================
	   RÔLES SEMANTIQUES — dérivés des tokens canoniques via
	   color-mix(), jamais de blanc pur (#FFFFFF) ni valeur inventée
	   ============================================================ */

	--bg: var(--obsidienne);
	--bg-surface: var(--ombre-profonde);
	--ink: #E8E6E1;       /* clair sur obsidienne, ~7.5:1 */
	--ink-2: color-mix(in srgb, var(--ink) 60%, transparent);
	--hairline: color-mix(in srgb, var(--ink) 8%, transparent);

	/* Option C, 02/10 : rôles locaux des bandes de lecture. */
	--bg-clair: var(--blanc-forge);
	--ink-clair: var(--graphite-profond);
	--ink-2-clair: var(--ardoise);
	--hairline-clair: color-mix(in srgb, var(--graphite-profond) 10%, transparent);
	--surface-clair: color-mix(in srgb, var(--pierre-claire) 35%, var(--blanc-forge));
	--lien-clair: color-mix(in srgb, var(--sauge) 45%, var(--graphite-profond));

	/* ============================================================
	   ÉCHELLE TYPO FLUIDE (clamp) — mobile-first
	   h1 : clamp(40px, ..., 72px) comme spécifié
	   Interlignage titres ~1.05-1.15 · corps ~1.6
	   ============================================================ */

	--typo-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.85rem);
	--typo-sm: clamp(0.8rem, 0.74rem + 0.3vw, 0.95rem);
	--typo-base: clamp(1rem, 0.92rem + 0.4vw, 1.125rem);
	--typo-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.3rem);
	--typo-xl: clamp(1.4rem, 1.25rem + 0.75vw, 1.6rem);
	--typo-2xl: clamp(1.5rem, 1.3rem + 1vw, 2.2rem);
	--typo-3xl: clamp(1.75rem, 1.4rem + 1.75vw, 3rem);
	--typo-hero: clamp(1.75rem, 1.2rem + 3.5vw, 4.5rem);

	/* ============================================================
	   ESPACEMENT FLUIDE (clamp) — mobile-first
	   ============================================================ */

	--esp-xs: clamp(0.375rem, 0.3rem + 0.35vw, 0.625rem);
	--esp-sm: clamp(0.625rem, 0.5rem + 0.65vw, 1rem);
	--esp-md: clamp(1rem, 0.75rem + 1.25vw, 1.5rem);
	--esp-lg: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
	--esp-xl: clamp(2rem, 1.25rem + 3.75vw, 4rem);

	/* ============================================================
	   CONTENEURS
	   --lecture : colonne de lecture optimale (60ch)
	   --large : largeur max du site (1200px)
	   ============================================================ */

	--lecture: 60ch;
	--large: 1200px;
}