/**
 * Motherland design tokens.
 *
 * Source of truth: plugins/motherland/design/DESIGN.md (distilled from the
 * homepage mockups). Dark palette only. Fluid sizes interpolate between the
 * 440px mobile and 1440px desktop mockup values.
 */

:root {
	/* ---- Palette ---------------------------------------------------- */
	--bg-base: #060505;
	--bg-elevated: #0A0807;
	--bg-image-fallback: #0C0A09;
	--gold: #C9A24B;
	--gold-light: #E8CE8B;
	--gold-gradient: linear-gradient(180deg, #E8CE8B, #C9A24B);
	--on-gold: #0B0906;
	--text: #F4F1EA;
	--text-heading: #FFFDF8;
	--live-green: #6EE7A0;

	/* Channel triplets for the alpha ramps: rgb(var(--text-rgb) / .72) */
	--text-rgb: 244 241 234;
	--gold-rgb: 201 162 75;

	/* Named ramp stops used across sections */
	--text-muted: rgba(244, 241, 234, 0.72);
	--text-faint: rgba(244, 241, 234, 0.55);
	--border-gold: rgba(201, 162, 75, 0.2);
	--border-neutral: rgba(244, 241, 234, 0.1);
	--hairline: rgba(201, 162, 75, 0.15);

	/* ---- Typography -------------------------------------------------- */
	--font-display: 'Bodoni Moda', serif; /* weight 400 always, never bold */
	--font-ui: 'Archivo', system-ui, sans-serif;

	/* Fluid scale: mobile 440px → desktop 1440px */
	--fs-hero: clamp(52px, calc(29.12px + 5.2vw), 104px);
	--fs-h2: clamp(30px, calc(18.56px + 2.6vw), 56px);
	--fs-card-title: clamp(30px, calc(22.08px + 1.8vw), 48px);
	--fs-card-title-sm: clamp(20px, calc(16.92px + 0.7vw), 27px);
	--fs-stat: clamp(32px, calc(21.44px + 2.4vw), 56px);
	--fs-body: clamp(14.5px, calc(13.4px + 0.25vw), 17px);
	--fs-body-sm: clamp(13px, calc(12.12px + 0.2vw), 15px);
	--fs-micro: 11px; /* all-caps micro-labels: 10–11.5px */

	--lh-display: 1; /* display leading 0.9–1.1 */
	--track-display: -0.02em; /* mobile hero tightens to -0.015em */

	/* Signature wide all-caps tracking */
	--track-eyebrow: 0.27em;
	--track-wordmark: 0.37em;
	--track-button: 0.1em;
	--track-nav: 0.16em;
	--track-ticker: 0.23em;

	/* ---- Layout, spacing, shape -------------------------------------- */
	/* Content is boxed at --content-max: up to ~1312px viewports the
	   clamp governs (18px mobile → 56px desktop per DESIGN.md); beyond
	   that the gutter absorbs the extra viewport so content centers at
	   --content-max while section backgrounds stay full-bleed. */
	--content-max: 1200px;
	--gutter: max(clamp(18px, calc(1.28px + 3.8vw), 56px), calc((100vw - var(--content-max)) / 2));
	--section-rhythm: clamp(44px, calc(21.12px + 5.2vw), 96px);
	--col-gap: 72px; /* desktop two-column gap */

	--radius-btn: 4px;
	--radius-card: 6px;
	--radius-tile: 4px;
	--radius-pill: 999px;

	--control-h: 48px; /* controls run 44–58px mobile, 44–68px desktop */

	/* ---- Imagery ----------------------------------------------------- */
	--img-filter: saturate(0.75) brightness(0.78) contrast(1.05);
	--scrim: linear-gradient(180deg, rgba(6, 5, 5, 0) 40%, rgba(6, 5, 5, 0.85) 100%);
}