:root {
	/* Deep slate/blue base — lighter and more contemporary than a flat black. */
	--cr-bg-dark: #141c2e;
	--cr-bg-darker: #0e1422;
	--cr-bg-card: #1b2439;
	--cr-bg-card-hover: #232f4a;
	--cr-border: rgba(255, 255, 255, 0.09);
	--cr-border-strong: rgba(255, 255, 255, 0.16);
	--cr-text-primary: #f6f7fb;
	--cr-text-secondary: #b3bcd4;
	--cr-text-muted: #7a84a3;

	/* Primary brand accents: Canadian red + warm gold, glass-dark surfaces. */
	--cr-accent-red: #d81b3f;
	--cr-accent-red-dark: #a5142f;
	--cr-accent-red-light: #f0405f;
	--cr-accent-gold: #e0ac4f;
	--cr-accent-gold-light: #f0c977;
	--cr-accent-green: #22b06b;
	--cr-accent-green-dark: #178a52;

	--cr-gradient-cta: linear-gradient(135deg, #ef1a44, #b1102f);
	--cr-gradient-cta-gold: linear-gradient(135deg, #f0c977, #d99b3c);
	--cr-gradient-cta-green: linear-gradient(135deg, #27c07a, #159158);
	--cr-gradient-cta-red: linear-gradient(135deg, #ef1a44, #a5142f);

	--cr-gradient-bg:
		radial-gradient(circle at 12% 8%, rgba(216, 27, 63, 0.14), transparent 45%),
		radial-gradient(circle at 88% 18%, rgba(224, 172, 79, 0.10), transparent 45%),
		linear-gradient(160deg, #182234 0%, #0e1422 55%, #10182a 100%);
	--cr-gradient-hero:
		radial-gradient(circle at 15% 20%, rgba(216, 27, 63, 0.20), transparent 55%),
		radial-gradient(circle at 85% 75%, rgba(224, 172, 79, 0.14), transparent 55%);

	/* Glassmorphism surface: translucent card with a light border, meant to sit
	   on top of --cr-gradient-bg with backdrop-filter blur applied in components.
	   Kept deliberately denser than a subtle glass effect so cards read as
	   distinct blocks rather than blending into the page background. */
	--cr-glass-bg: rgba(35, 47, 74, 0.55);
	--cr-glass-bg-hover: rgba(45, 59, 92, 0.65);
	--cr-glass-border: rgba(255, 255, 255, 0.14);
	/* Kept modest on purpose: backdrop-filter blur is one of the most
	   GPU-expensive CSS effects, and this variable is reused on ~15+
	   elements across the page (header, cards, badges). A larger radius
	   here caused visible scroll jank, especially on the sticky header
	   which repaints its blur every frame while scrolling. */
	--cr-glass-blur: 8px;

	--cr-radius-sm: 10px;
	--cr-radius-md: 16px;
	--cr-radius-lg: 26px;
	--cr-shadow-card: 0 8px 24px rgba(6, 10, 20, 0.35);
	--cr-shadow-card-lg: 0 18px 44px rgba(6, 10, 20, 0.45);
	--cr-shadow-glow-red: 0 0 26px rgba(216, 27, 63, 0.35);
	--cr-shadow-glow-gold: 0 0 22px rgba(224, 172, 79, 0.3);
	--cr-shadow-glow-green: 0 0 22px rgba(34, 176, 107, 0.3);

	/* Brighter neon accents — layered double-glow (tight + wide radius) so
	   headings/borders/icons read as lit-up rather than just softly shadowed.
	   Used sparingly: section headings, card borders on hover, key icons. */
	--cr-neon-red: 0 0 6px rgba(240, 64, 95, 0.8), 0 0 22px rgba(216, 27, 63, 0.55), 0 0 44px rgba(216, 27, 63, 0.25);
	--cr-neon-gold: 0 0 6px rgba(240, 201, 119, 0.85), 0 0 20px rgba(224, 172, 79, 0.5), 0 0 40px rgba(224, 172, 79, 0.22);
	--cr-neon-border-gold: 0 0 0 1px rgba(224, 172, 79, 0.5), 0 0 16px rgba(224, 172, 79, 0.35), 0 0 32px rgba(224, 172, 79, 0.15);
	--cr-neon-border-red: 0 0 0 1px rgba(216, 27, 63, 0.55), 0 0 16px rgba(216, 27, 63, 0.4), 0 0 32px rgba(216, 27, 63, 0.18);

	--cr-font-heading: 'Poppins', sans-serif;
	--cr-font-body: 'Inter', sans-serif;
	--cr-container-width: 1280px;
	--cr-header-height: 80px;
	--cr-letter-tight: -0.02em;
	--cr-letter-wide: 0.06em;
}