/* Hourglass — design tokens (source : README-CLAUDE-CODE.md + maquette 01 Design System) */
:root {
	/* Fonds et surfaces */
	--hg-bg: #F8F8F5;
	--hg-surface: #FFFFFF;
	--hg-tint: #EAEDEC;
	--hg-tint-2: #EEF0EF;
	--hg-tint-3: #E2E6E5;
	--hg-tint-4: #E5E9E8;
	--hg-tint-5: #DAE0DE;

	/* Accents ardoise */
	--hg-accent: #4F6068;
	--hg-accent-dark: #3E4C53;
	--hg-accent-light: #9AAEB5;
	--hg-accent-mid: #8CA2AA;

	/* Panneaux sombres */
	--hg-dark: #333F45;
	--hg-on-dark: #F0F4F5;

	/* Textes */
	--hg-ink: #24292B;
	--hg-ink-strong: #3F464A;
	--hg-ink-soft: #5C666B;
	--hg-ink-meta: #68737A; /* AA 4.86:1 sur blanc, 4.57:1 sur fond page */
	--hg-ink-meta-deco: #7C878C; /* réservé au décoratif et aux grands corps (≥ 24px) */
	--hg-on-dark-muted: rgba(240, 244, 245, 0.66); /* 5.28:1 sur #333F45 */

	/* Bordures */
	--hg-border-1: rgba(36, 41, 43, 0.08);
	--hg-border-2: rgba(36, 41, 43, 0.12);
	--hg-border-3: rgba(36, 41, 43, 0.18);
	--hg-border-4: rgba(36, 41, 43, 0.28);

	/* Sauge (badges nutrition / santé) */
	--hg-sage: #5E7260;
	--hg-sage-ink: #46584A; /* 6.49:1 sur --hg-sage-bg, pour les petits corps */
	--hg-sage-bg: #E9EEE7;
	--hg-sage-bg-2: #D3DECF;

	/* Accent très pâle (décoratif : points, pictos) */
	--hg-accent-faint: #B4C2C8;

	/* Erreur */
	--hg-error: #B4544A;
	--hg-error-on-dark: #E8A79F; /* 5.4:1 sur #333F45 */
	--hg-error-deep: #A84E45; /* 4.64:1 sur #EAEDEC */

	/* Verre (boutons et cartes glassmorphism) */
	--hg-glass: rgba(154, 174, 181, 0.22);
	--hg-glass-hover: rgba(138, 161, 170, 0.38);
	--hg-glass-card: rgba(154, 174, 181, 0.14);
	--hg-glass-fallback: rgba(154, 174, 181, 0.35);
	--hg-glass-border: rgba(255, 255, 255, 0.65);
	--hg-glass-ink: #26333B;

	/* Rayons */
	--hg-r-pill: 999px;
	--hg-r-card: 20px;
	--hg-r-field: 14px;
	--hg-r-block: 28px;

	/* Ombres, toujours charbon froid, jamais noir pur */
	--hg-shadow-btn: 0 10px 26px -14px rgba(79, 96, 104, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
	--hg-shadow-card: 0 24px 50px -32px rgba(36, 41, 43, 0.35);
	--hg-shadow-panel: 0 30px 70px -36px rgba(36, 41, 43, 0.4);
	--hg-shadow-device: 0 30px 60px -24px rgba(20, 26, 29, 0.6);

	/* Échelle typographique (valeurs rendues des maquettes, tokenisées) */
	--hg-fs-display: clamp(42px, 5vw, 72px);
	--hg-fs-h2: clamp(32px, 3.6vw, 46px);
	--hg-fs-h2-small: clamp(30px, 3.2vw, 40px);
	--hg-fs-card-title: 22px;
	--hg-fs-body-lg: 19px;
	--hg-fs-body: 16.5px;
	--hg-fs-small: 14px;
	--hg-fs-eyebrow: 12px;

	/* Typographies */
	--hg-serif: 'Instrument Serif', Georgia, serif;
	--hg-sans: 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
	--hg-mono: ui-monospace, Menlo, monospace;

	/* Grille et rythme */
	--hg-content: 1240px;
	--hg-gutter: clamp(20px, 6.5vw, 100px);
	--hg-section: 96px;
	--hg-transition: 0.18s ease-out;
}

@media (max-width: 900px) {
	:root {
		--hg-section: 64px;
	}
}