/* ──────────────────────────────────────────────────────────────────────
   Welia — Design tokens
   Source de vérité visuelle. Tout le reste consomme ces variables.
   ────────────────────────────────────────────────────────────────────── */

:root {
	/* Surfaces */
	--bg-primary: #FFFFFF;
	--bg-surface: #F7F5F1;
	--bg-elevated: #FFFFFF;

	/* Texte (jamais #000) */
	--text-primary: #2B2A28;
	--text-secondary: #6B6864;
	--text-tertiary: #9C9890;
	--text-on-accent: #FFFFFF;

	/* Accents */
	--accent-primary: #5B3650;
	--accent-primary-hover: #482A40;
	--accent-secondary: #A88A75;

	/* Bordures */
	--border-subtle: #E8E2D5;
	--border-default: #D4CCC0;

	/* États */
	--success: #6B8266;
	--warning: #B8865B;
	--error: #A04A4A;
	--error-bg: #F7EBEB;

	/* Type */
	--font-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
	--font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

	/* Échelle modulaire — px pour clarté, le reset gère le rem fallback */
	--fs-h1: 3rem;       /* 48 */
	--fs-h2: 2rem;       /* 32 */
	--fs-h3: 1.5rem;     /* 24 */
	--fs-h4: 1.25rem;    /* 20 */
	--fs-body-lg: 1.125rem; /* 18 */
	--fs-body: 1rem;     /* 16 */
	--fs-small: 0.875rem;/* 14 */
	--fs-micro: 0.6875rem; /* 11 — crédit footer */

	/* Espacement (échelle 4px) */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-6: 1.5rem;
	--s-8: 2rem;
	--s-12: 3rem;
	--s-16: 4rem;
	--s-24: 6rem;
	--s-32: 8rem;
	--s-48: 12rem;

	/* Radii doux */
	--r-sm: 4px;
	--r-md: 8px;
	--r-pill: 999px;

	/* Ombres très légères, chaudes */
	--shadow-soft: 0 1px 2px rgba(43,42,40,.04), 0 4px 12px rgba(43,42,40,.06);
	--shadow-hover: 0 2px 4px rgba(43,42,40,.05), 0 12px 32px rgba(43,42,40,.08);

	/* Transitions */
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--t-fast: 0.18s var(--ease-out);
	--t-med: 0.32s var(--ease-out);
	--t-slow: 0.6s var(--ease-out);

	/* Containers */
	--container-max: 1280px;
	--container-prose: 680px;
	--container-narrow: 880px;
}

/* ───── Dark mode ───────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	:root {
		--bg-primary: #1F1E1C;
		--bg-surface: #2A2926;
		--bg-elevated: #2A2926;

		--text-primary: #F2EFE8;
		--text-secondary: #B5B0A5;
		--text-tertiary: #8B8780;

		--accent-primary: #B888AB;
		--accent-primary-hover: #C99FBE;
		--accent-secondary: #C7AB97;

		--border-subtle: #3A3935;
		--border-default: #4A4843;

		--error-bg: #3A2828;

		--shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.4);
		--shadow-hover: 0 2px 4px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.5);
	}
}

/* ───── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.anim { opacity: 1 !important; transform: none !important; }
}