/*
 * OgreClan's colour schemes, shared by draft.ogreclan.com and replay.ogreclan.com. <html data-theme> is the choice:
 *   device (or none)  light or dark, as the device is set
 *   light, dark       always that
 *   teal, hearthflame, wellspring, cornerstone
 *                     Ogerpon's four masks, light or dark as the device is set
 * It's kept in the ogreclan_theme cookie (for all of ogreclan.com); see src/theme.ts.
 */

/* Light, and every colour's starting point */
:root {
	--bg: #f3f5f9;
	--panel: #ffffff;
	--panel-2: #f7f8fb;
	--text: #1d2330;
	--muted: #667085;
	--border: #d6dbe4;
	--accent: #2b4a8b;
	--accent-soft: rgba(43, 74, 139, 0.1);
	--accent-text: #ffffff;
	--you: rgba(43, 108, 210, 0.12);
	--shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
	--good: #2f9e52;
	--good-bg: #d8f2df;
	--warn: #b98a00;
	--warn-bg: #fbf0c8;
	--bad: #c6372f;
	--bad-bg: #f9d9d6;
	color-scheme: light;
}

/* Dark: chosen, or the device is dark and light wasn't chosen. These colours are shared by every dark scheme. */
:root[data-theme="dark"] {
	--good: #6fd18e;
	--good-bg: #1f4a2c;
	--warn: #f0c84a;
	--warn-bg: #4a3e12;
	--bad: #ff8077;
	--bad-bg: #57211d;
	--shadow: none;
	color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--good: #6fd18e;
		--good-bg: #1f4a2c;
		--warn: #f0c84a;
		--warn-bg: #4a3e12;
		--bad: #ff8077;
		--bad-bg: #57211d;
		--shadow: none;
		color-scheme: dark;
	}
}

/* Dark, plain */
:root[data-theme="dark"] {
	--bg: #14171d;
	--panel: #1d222b;
	--panel-2: #232934;
	--text: #e6e9ef;
	--muted: #9aa3b2;
	--border: #333a47;
	--accent: #6d93e0;
	--accent-soft: rgba(109, 147, 224, 0.15);
	--accent-text: #0e1420;
	--you: rgba(77, 140, 240, 0.18);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]), :root[data-theme="device"] {
		--bg: #14171d;
		--panel: #1d222b;
		--panel-2: #232934;
		--text: #e6e9ef;
		--muted: #9aa3b2;
		--border: #333a47;
		--accent: #6d93e0;
		--accent-soft: rgba(109, 147, 224, 0.15);
		--accent-text: #0e1420;
		--you: rgba(77, 140, 240, 0.18);
	}
}

/* Teal Mask: green and teal */
:root[data-theme="teal"] {
	--bg: #edf6f3;
	--panel: #ffffff;
	--panel-2: #f3f9f7;
	--text: #17302b;
	--muted: #5c7771;
	--border: #c9e0d9;
	--accent: #137a69;
	--accent-soft: rgba(19, 122, 105, 0.12);
	--accent-text: #ffffff;
	--you: rgba(19, 122, 105, 0.13);
}
@media (prefers-color-scheme: dark) {
	:root[data-theme="teal"] {
		--bg: #0e1917;
		--panel: #142320;
		--panel-2: #1a2c28;
		--text: #e0efeb;
		--muted: #8fa9a3;
		--border: #284440;
		--accent: #3cc3a7;
		--accent-soft: rgba(60, 195, 167, 0.16);
		--accent-text: #05201a;
		--you: rgba(60, 195, 167, 0.18);
	}
}

/* Hearthflame Mask: ember red on charcoal */
:root[data-theme="hearthflame"] {
	--bg: #faf0ee;
	--panel: #ffffff;
	--panel-2: #fcf5f3;
	--text: #33191a;
	--muted: #80605d;
	--border: #ebd0cb;
	--accent: #b3302a;
	--accent-soft: rgba(179, 48, 42, 0.1);
	--accent-text: #ffffff;
	--you: rgba(179, 48, 42, 0.11);
}
@media (prefers-color-scheme: dark) {
	:root[data-theme="hearthflame"] {
		--bg: #191112;
		--panel: #241718;
		--panel-2: #2d1d1e;
		--text: #f2e3e1;
		--muted: #b49894;
		--border: #46292a;
		--accent: #ff6a52;
		--accent-soft: rgba(255, 106, 82, 0.15);
		--accent-text: #2a0905;
		--you: rgba(255, 106, 82, 0.17);
	}
}

/* Wellspring Mask: deep water blue */
:root[data-theme="wellspring"] {
	--bg: #edf3fb;
	--panel: #ffffff;
	--panel-2: #f4f8fd;
	--text: #162641;
	--muted: #5b6f8f;
	--border: #cbdaf0;
	--accent: #1d5fc1;
	--accent-soft: rgba(29, 95, 193, 0.1);
	--accent-text: #ffffff;
	--you: rgba(29, 95, 193, 0.12);
}
@media (prefers-color-scheme: dark) {
	:root[data-theme="wellspring"] {
		--bg: #0e1422;
		--panel: #141c2e;
		--panel-2: #1a2439;
		--text: #e1e9f6;
		--muted: #90a1bf;
		--border: #283957;
		--accent: #5b9cff;
		--accent-soft: rgba(91, 156, 255, 0.16);
		--accent-text: #061226;
		--you: rgba(91, 156, 255, 0.18);
	}
}

/* Cornerstone Mask: weathered stone */
:root[data-theme="cornerstone"] {
	--bg: #f2f0ec;
	--panel: #ffffff;
	--panel-2: #f7f5f2;
	--text: #26231e;
	--muted: #716b60;
	--border: #dcd7cd;
	--accent: #675a45;
	--accent-soft: rgba(103, 90, 69, 0.12);
	--accent-text: #ffffff;
	--you: rgba(103, 90, 69, 0.13);
}
@media (prefers-color-scheme: dark) {
	:root[data-theme="cornerstone"] {
		--bg: #161513;
		--panel: #201e1b;
		--panel-2: #282622;
		--text: #ece8e1;
		--muted: #a9a295;
		--border: #3c3833;
		--accent: #cbb894;
		--accent-soft: rgba(203, 184, 148, 0.15);
		--accent-text: #1e1a12;
		--you: rgba(203, 184, 148, 0.17);
	}
}