:root {
	/* Neutral charcoal base — lets the red/white accents carry the Canadian
	   identity instead of competing with a tinted background. */
	--cr-bg-dark: #1c1c1f;
	--cr-bg-darker: #121213;
	--cr-bg-card: #262628;
	--cr-bg-card-hover: #313133;
	--cr-border: rgba(255, 255, 255, 0.09);
	--cr-border-strong: rgba(255, 255, 255, 0.2);
	--cr-text-primary: #ffffff;
	--cr-text-secondary: #cfcfd2;
	--cr-text-muted: #8c8c90;

	/* Primary brand accents: Canadian flag red + white, on dark charcoal
	   surfaces — red carries urgency/CTAs, white carries trust/clarity. */
	--cr-accent-red: #d52b1e;
	--cr-accent-red-dark: #a31f16;
	--cr-accent-red-light: #ef4a3b;
	--cr-accent-gold: #ffffff;
	--cr-accent-gold-light: #ffffff;
	--cr-accent-green: #2fa84f;
	--cr-accent-green-dark: #217c3a;

	--cr-gradient-cta: linear-gradient(135deg, #ef4a3b, #a31f16);
	--cr-gradient-cta-gold: linear-gradient(135deg, #ffffff, #d8d8db);
	--cr-gradient-cta-green: linear-gradient(135deg, #3fc466, #217c3a);
	--cr-gradient-cta-red: linear-gradient(135deg, #ef4a3b, #a31f16);

	--cr-gradient-bg:
		radial-gradient(circle at 10% 8%, rgba(213, 43, 30, 0.16), transparent 46%),
		radial-gradient(circle at 90% 18%, rgba(255, 255, 255, 0.05), transparent 46%),
		linear-gradient(160deg, #1f1f22 0%, #121213 55%, #151516 100%);
	--cr-gradient-hero:
		radial-gradient(circle at 15% 20%, rgba(213, 43, 30, 0.24), transparent 56%),
		radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.08), transparent 56%);

	/* 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(38, 38, 40, 0.55);
	--cr-glass-bg-hover: rgba(49, 49, 51, 0.68);
	--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(0, 0, 0, 0.4);
	--cr-shadow-card-lg: 0 18px 44px rgba(0, 0, 0, 0.5);
	--cr-shadow-glow-red: 0 0 26px rgba(213, 43, 30, 0.4);
	--cr-shadow-glow-gold: 0 0 20px rgba(255, 255, 255, 0.25);
	--cr-shadow-glow-green: 0 0 22px rgba(47, 168, 79, 0.32);

	/* 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(239, 74, 59, 0.85), 0 0 22px rgba(213, 43, 30, 0.55), 0 0 44px rgba(213, 43, 30, 0.28);
	--cr-neon-gold: 0 0 6px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 255, 0.4), 0 0 40px rgba(255, 255, 255, 0.18);
	--cr-neon-border-gold: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 16px rgba(255, 255, 255, 0.25), 0 0 32px rgba(255, 255, 255, 0.1);
	--cr-neon-border-red: 0 0 0 1px rgba(213, 43, 30, 0.6), 0 0 16px rgba(213, 43, 30, 0.42), 0 0 32px rgba(213, 43, 30, 0.2);

	--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;
}