/* ==========================================================================
   Beauty Impact — Tokens du design system (voir docs/DESIGN_SYSTEM.md)
   ========================================================================== */

@font-face {
	font-family: "Geist";
	src: url("../fonts/geist.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Couleurs — neutres */
	--bi-ink: #15120f;
	--bi-graphite: #4a443e;
	--bi-mute: #6b645c;
	--bi-stone: #7a726a;
	--bi-hairline: #e3ddd5;
	--bi-hairline-strong: #cfc7bd;
	--bi-porcelain: #f7f4ef;
	--bi-linen: #efeae3;
	--bi-white: #ffffff;

	/* Couleur Beauty Impact */
	--bi-rose: #ec556d;
	--bi-rose-600: #d23e5b;
	--bi-rose-700: #b8304c;
	--bi-rose-800: #9a2840;
	--bi-blush: #f6e1e0;

	/* Fonctionnelles */
	--bi-success: #1e6b4a;
	--bi-success-tint: #e3f0e9;
	--bi-warning: #8a5a00;
	--bi-warning-tint: #f6ebd3;
	--bi-error: #b3261e;
	--bi-error-tint: #f8e2df;
	--bi-info: #1f4e8c;
	--bi-info-tint: #e2eaf5;

	/* Nuancier (teintes provisoires, non officielles) */
	--brand-affirm: #6b4c9a;
	--brand-affirmcare: #8e4f7e;
	--brand-fiberguard: #45286f;
	--brand-texture-release: #756236;
	--brand-keracare: #946543;
	--brand-as-i-am: #35603a;
	--brand-uberliss: #141414;

	/* Typographie */
	--bi-font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bi-font-display: var(--bi-font-sans);
	--bi-font-mono: var(--bi-font-sans);

	--bi-text-2xs: 0.75rem;
	--bi-text-xs: 0.8125rem;
	--bi-text-sm: 0.875rem;
	--bi-text-base: 1rem;
	--bi-text-md: 1.125rem;
	--bi-text-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
	--bi-text-xl: clamp(1.3125rem, 1.15rem + 0.6vw, 1.625rem);
	--bi-text-2xl: clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem);
	--bi-text-3xl: clamp(1.875rem, 1.5rem + 1.7vw, 2.75rem);
	--bi-text-display: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);

	--bi-leading-tight: 1.1;
	--bi-leading-snug: 1.2;
	--bi-leading-ui: 1.4;
	--bi-leading-body: 1.6;
	--bi-tracking-display: -0.025em;
	--bi-tracking-label: 0.06em;

	/* Espacements */
	--bi-space-1: 0.25rem;
	--bi-space-2: 0.5rem;
	--bi-space-3: 0.75rem;
	--bi-space-4: 1rem;
	--bi-space-5: 1.25rem;
	--bi-space-6: 1.5rem;
	--bi-space-7: 2rem;
	--bi-space-8: 2.5rem;
	--bi-space-9: 3rem;
	--bi-space-10: 4rem;
	--bi-space-11: 5rem;
	--bi-space-12: 6rem;
	--bi-space-13: 8rem;
	--bi-section: clamp(4rem, 2.5rem + 6vw, 8rem);

	/* Mise en page */
	--bi-container: 1360px;
	--bi-container-wide: 1600px;
	--bi-container-text: 720px;
	--bi-gutter: clamp(1rem, 4vw, 3rem);
	--bi-gap: clamp(1rem, 0.6rem + 1vw, 1.5rem);

	/* Formes */
	--bi-radius-0: 0;
	--bi-radius-1: 2px;
	--bi-radius-2: 4px;
	--bi-radius-pill: 999px;
	--bi-border: 1px solid var(--bi-hairline);
	--bi-border-strong: 1px solid var(--bi-hairline-strong);
	--bi-shadow-overlay: 0 24px 48px -16px rgb(21 18 15 / 0.22), 0 2px 6px rgb(21 18 15 / 0.06);

	/* Mouvement */
	--bi-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
	--bi-dur-1: 120ms;
	--bi-dur-2: 220ms;
	--bi-dur-3: 420ms;

	/* En-tête */
	--bi-utility-h: 2.25rem;
	--bi-masthead-h: 4rem;

	/* Plans */
	--bi-z-header: 100;
	--bi-z-panel: 110;
	--bi-z-overlay: 190;
	--bi-z-drawer: 200;
}

@media (max-width: 767px) {
	:root {
		--bi-utility-h: 0px;
	}
}

@media (min-width: 1024px) {
	:root {
		--bi-masthead-h: 4.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--bi-dur-1: 0ms;
		--bi-dur-2: 0ms;
		--bi-dur-3: 0ms;
	}
}