/*
 * SkillionsPro Portal - dark theme. Applied to any element with data-theme="dark"
 * (the portal <html>, or a public form wrapper). Only token overrides belong here.
 */

[data-theme="dark"] {
	color-scheme: dark;

	--spp-primary: #4DB8F5;
	--spp-primary-hover: #7CCBF8;
	--spp-on-primary: #0B1620;
	--spp-on-primary-veil: rgba(255, 255, 255, .2);
	--spp-primary-tint: rgba(29, 161, 242, .18);
	--spp-teal-strong: #6CCBBB;
	--spp-teal-tint: rgba(92, 184, 168, .18);
	--spp-pink-strong: #FF7A98;
	--spp-pink-tint: rgba(240, 67, 108, .18);
	--spp-yellow-strong: #FCC72E;
	--spp-yellow-tint: rgba(252, 199, 46, .16);
	--spp-purple-strong: #A88BF5;
	--spp-purple-tint: rgba(116, 67, 232, .2);
	--spp-success: #4ACB8C;
	--spp-success-tint: rgba(74, 203, 140, .16);

	--spp-bg: #0F1720;
	--spp-surface: #17212B;
	--spp-surface-2: #1D2935;
	--spp-border: #2A3744;
	--spp-border-strong: #6E7D8C;
	--spp-text: #E6EDF3;
	--spp-muted: #9AA7B4;
	--spp-focus: #4DB8F5;
	--spp-overlay: rgba(0, 0, 0, .6);
	--spp-banner: #1D6359;

	--spp-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
	--spp-shadow-lg: 0 8px 32px rgba(0, 0, 0, .45);
}