/* Maison Kelvin — design tokens v2 (refonte claire, 2026-08)
 *
 * Système : fond clair #FAFAFA, encre #1C1C1C, écru #F2EBE3 pour les bandes
 * éditoriales et le footer. Display serif Asul en capitales espacées,
 * corps Josefin Sans. Boutons carrés à filet 1px, jamais de radius.
 */

:root {
	/* Palette — tokens de base */
	--mk-bg: #FAFAFA;
	--mk-surface: #FFFFFF;
	--mk-ecru: #F2EBE3;
	--mk-ink: #1C1C1C;
	--mk-ink-soft: rgba(28, 28, 28, 0.65);
	--mk-ink-mute: rgba(28, 28, 28, 0.45);
	--mk-line: #D9D9D9;
	--mk-line-ecru: #D2CCC5;
	--mk-accent: #1C1C1C;      /* les CTA sont encre sur clair */
	--mk-accent-2: #B08D57;    /* laiton — filets décoratifs, prix promo */
	--mk-ok: #5F7A5F;

	/* Dérivées conservées pour compatibilité avec l'existant */
	--mk-accent-dark: #141414;
	--mk-accent-light: #4a4a4a;
	--mk-accent-mist: #F1EFEC;
	--mk-accent-2-light: #CBB292;
	--mk-accent-2-pale: #F6F0E8;
	--mk-bg-dark: #F0EEEA;
	--mk-sale: #9C2B1F;        /* prix barré / badge promo */
	--mk-on-accent: #FFFFFF;

	/* Typographie */
	--mk-font-display: "Asul", Georgia, serif;
	--mk-font-body: "Josefin Sans", "Helvetica Neue", sans-serif;

	--mk-fs-xs: 0.625rem;      /* 10px — labels uppercase */
	--mk-fs-sm: 0.8125rem;     /* 13px — boutons, nav */
	--mk-fs-base: 0.875rem;    /* 14px — corps (comme la réf) */
	--mk-fs-lg: 1rem;
	--mk-fs-xl: 1.25rem;
	--mk-fs-2xl: 1.375rem;     /* 22px — H2 serif espacé */
	--mk-fs-3xl: 1.75rem;
	--mk-fs-4xl: 2.375rem;
	--mk-fs-hero: clamp(1.5rem, 3.2vw, 2.5rem);

	--mk-ls-wide: 0.18em;      /* titres serif */
	--mk-ls-btn: 0.18em;       /* boutons 13px -> ~2.34px */
	--mk-ls-label: 0.18em;     /* labels 10px -> 1.8px */

	--mk-lh-tight: 1.2;
	--mk-lh-snug: 1.45;
	--mk-lh-base: 1.65;

	/* Espacement */
	--mk-sp-1: 4px;
	--mk-sp-2: 8px;
	--mk-sp-3: 12px;
	--mk-sp-4: 16px;
	--mk-sp-5: 24px;
	--mk-sp-6: 32px;
	--mk-sp-7: 48px;
	--mk-sp-8: 64px;
	--mk-sp-9: 96px;

	/* Formes — tout est carré dans ce système */
	--mk-radius: 0px;
	--mk-radius-lg: 0px;
	--mk-radius-pill: 0px;
	--mk-radius-round: 999px;

	/* Ombres — très discrètes sur fond clair */
	--mk-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04);
	--mk-shadow-md: 0 4px 14px rgb(0 0 0 / 0.06);
	--mk-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.10);

	/* Layout */
	--mk-container: 1360px;
	--mk-container-narrow: 760px;
	--mk-gutter: clamp(16px, 3vw, 40px);
	--mk-header-h: 64px;
	--mk-announce-h: 36px;

	--mk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--mk-transition: 220ms var(--mk-ease);
}

@media (max-width: 782px) {
	:root {
		--mk-header-h: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}