/*
 * Valour Canada design tokens — derived from GRO-460 Figma tokenized structure readout.
 * Source file defines no Figma Styles/Variables; every value below was reverse-engineered
 * from node inspection and consolidated per the readout's design-system-fragmentation notes
 * (§1.3, §13.8). Card radius/border variants were consolidated to 3 formal tiers rather than
 * preserving every one-off value found across the 10 frames.
 */
:root {
	/* Color */
	--vc-color-crimson: #c10538;
	--vc-color-red-bright: #dd3333;
	--vc-color-near-black: #272727;
	--vc-color-darkest: #1e1e1e;
	--vc-color-mid-gray: #505050;
	--vc-color-light-gray: #f7f7f7;
	--vc-color-white: #ffffff;
	--vc-color-border-light: rgba(0, 0, 0, 0.1);
	--vc-color-border-gray: rgba(80, 80, 80, 0.2);

	/* Typography */
	/* Fjalla One is a narrow condensed display face; a bare "sans-serif" fallback
	   is much wider and can force the hero heading onto an extra line while the
	   webfont loads (Booster forces font-display:swap on every page regardless
	   of the enqueue's own display param, so this swap always happens). Narrow
	   system fallbacks close most of that width gap on the platforms that have
	   them; sans-serif remains the final fallback everywhere else. */
	--vc-font-display: "Fjalla One", "Arial Narrow", "Liberation Sans Narrow", sans-serif;
	--vc-font-body: "Inter", sans-serif;
	--vc-size-hero: clamp(2.5rem, 6vw, 6.25rem); /* 80-100px hero wordmarks */
	--vc-size-h2: 2.625rem; /* 42px section heading */
	--vc-size-h1-detail: 2rem; /* 32px page H1 on detail/single pages */
	--vc-size-h3-card: 1.5rem; /* 24px card/sidebar sub-heading */
	--vc-size-eyebrow-lg: 2rem; /* 32px, e.g. "NOTEWORTHY LINKS" mid-tier heading */
	--vc-size-body: 1rem; /* 16px body */
	--vc-size-body-lg: 1.125rem; /* 18px hero/intro body */
	--vc-size-label: 1rem; /* 16px nav/button label */
	--vc-size-caption: 0.875rem; /* 14px caption/credit/category-eyebrow/button--tag */
	--vc-line-body: 1.65;
	--vc-line-caption: 1.4;
	--vc-letter-spacing-eyebrow: 0.05em;

	/* Card system (consolidated — see GRO-460 §13.8) */
	--vc-card-radius-xs: 4px;
	--vc-card-radius-sm: 8px;
	--vc-card-radius-lg: 16px;
	--vc-card-border: 1px solid var(--vc-color-border-light);
	--vc-card-border-gray: 1px solid var(--vc-color-border-gray);
	--vc-shadow-card: 5px 5px 30px rgba(0, 0, 0, 0.15);

	/* Buttons */
	--vc-button-radius: 4px;
	--vc-button-padding-y: 16px;
	--vc-button-padding-x: 24px;
	--vc-button-gap: 10px;

	/* Layout */
	--vc-container-max: 1440px;
	--vc-content-max: 1440px;
	--vc-gutter: 80px;
	--vc-grid-gap: 30px;

	/* Breakpoints (build-time decision — no mobile/tablet frames exist in source file, GRO-460 §13.10) */
	--vc-bp-mobile: 640px;
	--vc-bp-tablet: 1024px;
	--vc-bp-desktop: 1280px;

	/* Image ratios */
	--vc-ratio-card: 407 / 280;
	--vc-ratio-library-card: 3 / 2;
	--vc-ratio-hero-detail: 843 / 581;
	--vc-ratio-banner: 4.28 / 1;
}