/* BoxManager colours and fonts, shared by every page.
   Dark by default. Light when the visitor picks it (html[data-theme="light"]) or, with no choice
   saved, when the device prefers light. Set the same tokens in all three places below. */

:root {
	--bm-red: #e5373a;
	--bm-red-dark: #c42528;
	--bm-blue: #2f6fe4;
	--bm-blue-dark: #2258c0;
	--bm-gold: #f2c14e;
	--bm-purple: #a674ff;
	--bm-green: #3ccf8e;
	--bm-orange: #f08a3c;
	/* Card tiers: bronze is brown, national (silver) is grey, prospect purple, champion blue, legend white. */
	--bm-tier-bronze: #a06a3c;
	--bm-tier-silver: #a3a8b0;
	--bm-tier-gold: #f2c14e;
	--bm-tier-platinum: #67d3e6;
	--bm-tier-prospect: #a674ff;
	--bm-tier-champion: #4a86f0;
	--bm-tier-legend: #f4f6fa;
	--bm-stripe: linear-gradient(90deg, var(--bm-red) 0%, var(--bm-red) 48%, var(--bm-blue) 52%, var(--bm-blue) 100%);
	--bm-radius: 14px;
	--bm-font-head: "Barlow Condensed", "Arial Narrow", sans-serif;
	--bm-font-body: "Inter", "Segoe UI", Arial, sans-serif;
	--bm-font-brand: "Exo 2", "Arial Black", sans-serif;

	/* Dark */
	--bm-bg: #0b0f17;
	--bm-overlay: linear-gradient(180deg, rgba(9, 12, 19, 0.86) 0%, rgba(9, 12, 19, 0.93) 55%, rgba(9, 12, 19, 0.97) 100%);
	--bm-surface-rgb: 19, 26, 38;
	--bm-surface: rgba(19, 26, 38, 0.88);
	--bm-surface-solid: #131a26;
	--bm-surface-2: #1a2333;
	--bm-line: #26324a;
	--bm-line-hi: rgba(255, 255, 255, 0.06);
	--bm-text: #e9edf5;
	--bm-muted: #9aa6bb;
	--bm-input: #0b0f17;
	--bm-topbar: rgba(11, 15, 23, 0.82);
	--bm-card-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
	--bm-silver: #a9b8d0;
	--bm-gold-text: #f2c14e;
	--bm-green-text: #3ccf8e;
	color-scheme: dark;
}

:root[data-theme="light"] {
	--bm-bg: #eef1f6;
	--bm-overlay: linear-gradient(180deg, rgba(240, 243, 248, 0.88) 0%, rgba(240, 243, 248, 0.94) 55%, rgba(240, 243, 248, 0.98) 100%);
	--bm-surface-rgb: 255, 255, 255;
	--bm-surface: rgba(255, 255, 255, 0.92);
	--bm-surface-solid: #ffffff;
	--bm-surface-2: #ffffff;
	--bm-line: #d9e0ea;
	--bm-line-hi: #ffffff;
	--bm-text: #131a26;
	--bm-muted: #5a6478;
	--bm-input: #f6f8fb;
	--bm-topbar: rgba(255, 255, 255, 0.86);
	--bm-card-shadow: 0 18px 40px rgba(20, 30, 50, 0.16);
	--bm-silver: #6f7f99;
	--bm-gold-text: #b8860b;
	--bm-green-text: #138a55;
	--bm-tier-bronze: #8a5a32;
	--bm-tier-silver: #868b93;
	--bm-tier-gold: #e0a92a;
	--bm-tier-prospect: #8a55e8;
	--bm-tier-champion: #2f6fe4;
	--bm-tier-legend: #aeb5c0;
	color-scheme: light;
}

@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--bm-bg: #eef1f6;
		--bm-overlay: linear-gradient(180deg, rgba(240, 243, 248, 0.88) 0%, rgba(240, 243, 248, 0.94) 55%, rgba(240, 243, 248, 0.98) 100%);
		--bm-surface-rgb: 255, 255, 255;
		--bm-surface: rgba(255, 255, 255, 0.92);
		--bm-surface-solid: #ffffff;
		--bm-surface-2: #ffffff;
		--bm-line: #d9e0ea;
		--bm-line-hi: #ffffff;
		--bm-text: #131a26;
		--bm-muted: #5a6478;
		--bm-input: #f6f8fb;
		--bm-topbar: rgba(255, 255, 255, 0.86);
		--bm-card-shadow: 0 18px 40px rgba(20, 30, 50, 0.16);
		--bm-silver: #6f7f99;
		--bm-gold-text: #b8860b;
		--bm-green-text: #138a55;
		--bm-tier-bronze: #8a5a32;
		--bm-tier-silver: #868b93;
		--bm-tier-gold: #e0a92a;
		--bm-tier-prospect: #8a55e8;
		--bm-tier-champion: #2f6fe4;
		--bm-tier-legend: #aeb5c0;
		color-scheme: light;
	}
}

/* Theme button: shows the icon for the mode it switches to. */
.bm-icon-moon { display: none; }
:root[data-theme="light"] .bm-icon-sun { display: none; }
:root[data-theme="light"] .bm-icon-moon { display: block; }
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) .bm-icon-sun { display: none; }
	:root:not([data-theme="dark"]) .bm-icon-moon { display: block; }
}