/**
 * VU Design Tokens
 *
 * CSS custom properties transcribed from the approved Direction A / a-2
 * mockup (https://crank-kit.com/maquettes/a-2/, unchanged since
 * 2026-07-15, inspected 2026-09-04). Values are evidence-based — see the
 * WEB-03 inspection report for the full source mapping. Only values that
 * are repeated or clearly semantic are tokenized here; genuine one-offs
 * stay as literals in components.css, each commented with its source.
 *
 * Font delivery: Inter and Space Grotesk are self-hosted via Kadence's
 * "Load Google Fonts Locally" pipeline (WEB-04, assigned through the
 * Kadence Typography customizer). Bebas Neue (the display/heading font)
 * was never assigned to a Kadence Typography control, so that pipeline
 * never generated it — WEB-05 QA found zero @font-face for 'Bebas Neue'
 * anywhere on the site, meaning H1/H2 silently fell back to the browser's
 * generic sans-serif on every platform (each OS's differing default
 * sans-serif substitute is why this looked "closer to right" on iOS than
 * on desktop — neither was actually loading Bebas Neue). Fixed in WEB-05
 * by self-hosting it directly from the child theme, below, the same way
 * Inter/Space Grotesk are self-hosted, since assigning a Kadence
 * Typography control is a wp-admin action outside Claude Code's scope
 * (CLAUDE.md Section 11).
 */

/*
 * Bebas Neue only ships one weight (400) — Google Fonts "Bebas Neue"
 * v16, latin subset (covers the accented characters used in the site's
 * French content; latin-ext is not needed for current copy). Consuming
 * rules must set font-weight: 400 explicitly, since Kadence's global
 * heading default is font-weight: 700 and no bold face exists to match.
 */
@font-face {
	font-family: 'Bebas Neue';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/bebas-neue/bebas-neue-v16-latin-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Color — surfaces */
	--vu-color-bg: #141618;
	--vu-color-bg-rgb: 20, 22, 24;
	--vu-color-surface: #1E2026;
	--vu-color-surface-2: #252830;
	--vu-color-border: #2C2E34;

	/* Color — brand red */
	--vu-color-red: #C41E24;
	--vu-color-red-dark: #8C1318;
	--vu-color-red-alpha: rgba(196, 30, 36, .12);
	--vu-color-red-subtle: rgba(196, 30, 36, .2);

	/* Color — text */
	--vu-color-white: #F2F1EF;
	--vu-color-white-rgb: 242, 241, 239;
	--vu-color-gray: #9A9CA0;
	--vu-color-gray-dark: #5A5C60;

	/* Radius */
	--vu-radius: 4px;

	/* Layout */
	--vu-container-max: 1280px;
	--vu-gutter: 24px;
	--vu-section-py: 88px;

	/* Typography — font roles */
	--vu-font-display: 'Bebas Neue', sans-serif;
	--vu-font-body: 'Inter', sans-serif;
	--vu-font-ui: 'Space Grotesk', sans-serif;

	/* Typography — text scale (ascending; evidence per step) */
	--vu-text-xs: .72rem;      /* eyebrow/label */
	--vu-text-sm: .8125rem;    /* meta/caption: stat label, review source, part application */
	--vu-text-base: .875rem;   /* secondary body text: service card text, review author */
	--vu-text-md: .9375rem;    /* buttons, review quote text */
	--vu-text-lg: 1rem;        /* section/CTA descriptions, card sub-headings */
	--vu-text-xl: 1.0625rem;   /* lead paragraph — evidenced by hero subtext; not yet
	                               consumed here, hero assembly is WEB-04/05 scope */
	--vu-text-stat: 1.875rem;  /* stat-block number */

	/* Typography — display scale (fluid, Bebas Neue) */
	--vu-text-display-sm: clamp(2rem, 4vw, 3rem);     /* CTA heading */
	--vu-text-display-md: clamp(2.2rem, 4vw, 3.5rem); /* section heading */
	--vu-text-display-lg: clamp(2.8rem, 6.5vw, 6rem); /* hero heading — reserved, WEB-04/05 */
}

@media (max-width: 640px) {
	:root {
		--vu-gutter: 20px;
		--vu-section-py: 60px;
	}
}