/* ------------------------------------------------------------ *\
	Biovancia v3 — design tokens (single source of truth)
	Mirrors the Figma design system (Geist / Canelle / Vitamine).
	Consumed by product.css, reviews.css, about.css and any future
	v3 page. Enqueue this before the page stylesheet.
\* ------------------------------------------------------------ */

:root {
	/* Palette */
	--bva-black: #151412;
	--bva-white: #fefefe;
	--bva-ink: #15161a;
	--bva-dark-brown: #1c1a17;
	--bva-canelle-100: #f0ebe8;
	--bva-canelle-400: #9c4f21;
	--bva-myrtille-100: #f6f6f7;
	--bva-myrtille-500: #212a3a;
	--bva-vitamine-100: #fdf2ec;
	--bva-vitamine-300: #f6a763;
	--bva-vitamine-400: #f47a3f;
	--bva-badge-bg: #e7ded9;
	--bva-img-bg: #ebe6e0;
	/* Neutrals — pure black/white kept distinct from the brand --bva-black/-white
	   on purpose (see base.css usages). Warm creams + greys used as section grounds. */
	--bva-black-pure: #000;
	--bva-white-pure: #fff;
	--bva-border-grey: #ddd;
	--bva-cream: #f4ede5;
	--bva-cream-light: #fbf7f3;
	--bva-grey-100: #f2f2f2;
	--bva-espresso: #271b10;

	/* Tints */
	--bva-muted: rgba(28, 26, 23, 0.5);
	--bva-text-60: rgba(28, 26, 23, 0.6);
	--bva-text-50: rgba(21, 20, 18, 0.6);
	--bva-line: rgba(21, 20, 18, 0.14);
	--bva-hairline: #00000014;       /* ~8% black — subtle borders */
	--bva-shadow: #00000029;         /* ~16% black — shadows */
	--bva-overlay-white-60: #ffffff99;
	--bva-overlay-white-30: #ffffff4d;
	--bva-vitamine-tint: #f6a7630d;  /* vitamine-300 @ ~5% */

	/* Type — Geist / Geist Mono */
	--bva-font-sans: 'Geist', system-ui, -apple-system, sans-serif;
	--bva-font-mono: 'Geist Mono', ui-monospace, monospace;
	--bva-t-header-xl: 500 48px/1.1 var(--bva-font-sans);
	--bva-t-header-l: 400 28px/1.3 var(--bva-font-sans);
	--bva-t-header-m: 400 24px/1.2 var(--bva-font-sans);
	--bva-t-header-s: 500 20px/1.2 var(--bva-font-sans);
	--bva-t-paragraphe: 300 18px/1.32 var(--bva-font-sans);
	--bva-t-label: 300 14px/1.1 var(--bva-font-mono);

	/* Layout */
	--bva-rail: 1440px;
	--bva-bleed-pad: max(40px, calc((100% - 1360px) / 2));
}