:root {
	/* Brand colors - Simplified to 5 shades each */
	--color-primary: #149dcc; /* WD blue - base */
	--color-primary-light: #47c0e3; /* Lighter variant */
	--color-primary-lighter: #9bdcf0; /* Lightest variant */
	--color-primary-dark: #0c6f91; /* Darker variant */
	--color-primary-darker: #0a5a76; /* Darkest variant */
	--color-primary-rgb: 20,157,204;

	--color-dark: #244b67; /* Deep slate blue - base */
	--color-dark-light: #577da0; /* Lighter variant */
	--color-dark-lighter: #7e9bb6; /* Lightest variant */
	--color-dark-dark: #142d4a; /* Darker variant */
	--color-dark-darker: #0a1b2d; /* Darkest variant */
	--color-dark-rgb: 36,75,103;

	/* Accent colors */
	--color-gilded: #d8a14f;
	--color-gilded-dark: #7a4c1a;
	--color-gilded-rgb: 216,161,79;
	--color-gilded-glow: rgba(216, 161, 79, 0.35);

	/* Neutrals */
	--color-bg: #0f111a;
	--color-bg-secondary: #1a1d2e;
	--color-bg-tertiary: #252a3f;
	--color-bg-rgb: rgb(15,17,26); /* For rgba shadows */
	--color-surface: #1f1f1f;
	--color-surface-rgb: rgb(0, 0, 0);
	--color-text: #e8f3f8; /* Softer white for better readability */
	--color-text-muted: #a4b2c2; /* Higher contrast muted text */
	--color-text-heading: #ffffff; /* Pure white for headings */
	--color-black: #000000; /* Absolute black */
	--color-white: #ffffff; /* Absolute white */
	--color-black-rgb: 0,0,0; /* For rgba composition */
	--color-white-rgb: 255,255,255; /* For rgba composition */
	--color-border: rgba(148, 163, 184, 0.2);

	/* Gradients */
	--gradient-primary: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary) 100%);
	--gradient-primary-reverse: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark) 100%);
	--gradient-card: linear-gradient(160deg, rgba(var(--color-dark-rgb), 0.25), rgba(var(--color-primary-rgb), 0.18));
	--gradient-menu: linear-gradient(135deg, #000000 0%, #121212 100%);
	--gradient-background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.05), rgb(58 65 70));

	/* Effects */
	--focus-ring: rgba(20,157,204,0.25);
	--shadow-md: 0 10px 35px rgba(var(--color-bg-rgb), 0.3);
	--shadow-lg: 0 14px 45px rgba(var(--color-bg-rgb), 0.35);
	--shadow-card: 0 4px 6px rgba(var(--color-black-rgb), 0.05);
	--shadow-elevated: 0 12px 28px rgba(var(--color-black-rgb), 0.25);

	/* Borders */
	--color-primary-border: var(--color-primary-darker);
	
	/* Rarity colors */
	--color-mythic: #3b82f6; /* Blue */
	--color-legendary: #f97316; /* Orange */
	--color-epic: #a855f7; /* Purple */
}

/* Utility classes for quick usage in components */
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-card { background: var(--gradient-card); }
.bg-gradient-menu { background: var(--gradient-menu); }
.bg-gradient-background { background: var(--gradient-background); }
.text-primary { color: var(--color-primary); }
.text-dark { color: var(--color-dark); }
.border-subtle { border-color: var(--color-primary-darker); }
.border-strong { border-color: var(--color-primary-darker); }

/* Component-specific palette tokens */
:root {
	/* Cards */
	--color-card-border: rgba(148, 163, 184, 0.3);
	/* Sniper dark card color (header and body should match) */
	--card-dark-bg: #1e293b;
	--card-dark-header: #1e293b;
	--card-dark-title: var(--color-text-heading);
	--card-dark-body: var(--color-text);

	/* Light card inspired by team management */
	--card-light-bg: var(--color-white);
	--card-light-header: var(--color-white);
	--card-light-title: var(--color-black);
	--card-light-body: var(--color-black);

	/* Accents specific to cards */
	--card-shadow: var(--shadow-card), var(--shadow-elevated);

	/* Inputs for light themed cards */
	--input-light-bg: var(--color-white);
	--input-light-text: var(--color-black);
	--input-light-placeholder: rgba(var(--color-black-rgb), 0.5);
	--input-light-border: var(--color-card-border);
}