/*
 * 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, wellspring, hearthflame, cornerstone
 *                     OCDL's four divisions: the division's artwork (static/art) is the page, under ink panels in
 *                     its colours. Always dark, since the pictures are.
 * 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);
	}
}

/*
 * The divisions. Each one's landscape fills the page behind everything (fixed, under a gradient that keeps text
 * readable); panels are translucent ink, so the picture shows through a little; colours are taken from the picture.
 * replay.ogreclan.com loads this file from draft.ogreclan.com, so the pictures come from there too.
 */
:root:is([data-theme="teal"], [data-theme="wellspring"], [data-theme="hearthflame"], [data-theme="cornerstone"]) {
	--panel-2: rgb(255 255 255 / 0.06);
	--shadow: 0 8px 28px rgb(0 0 0 / 0.35);
	--good: #6fd18e;
	--good-bg: rgb(111 209 142 / 0.16);
	--warn: #f0c84a;
	--warn-bg: rgb(240 200 74 / 0.16);
	--bad: #ff8077;
	--bad-bg: rgb(255 128 119 / 0.16);
	color-scheme: dark;
	background: var(--bg);
}

/* Teal: moss, vines and the emerald forest */
:root[data-theme="teal"] {
	--art: url("/art/teal.jpg");
	--mask: url("/masks/teal.png");
	--bg: #0a1712;
	--panel: rgb(11 25 20 / 0.86);
	--text: #eef4e8;
	--muted: #a7bca9;
	--border: rgb(124 214 164 / 0.22);
	--accent: #52d69e;
	--accent-soft: rgb(82 214 158 / 0.16);
	--accent-text: #04200f;
	--you: rgb(82 214 158 / 0.18);
}

/* Wellspring: the turquoise falls under a blue sky */
:root[data-theme="wellspring"] {
	--art: url("/art/wellspring.jpg");
	--mask: url("/masks/wellspring.png");
	--bg: #08151c;
	--panel: rgb(9 23 32 / 0.86);
	--text: #eaf4f7;
	--muted: #a1b9c5;
	--border: rgb(104 204 236 / 0.22);
	--accent: #4fc8ea;
	--accent-soft: rgb(79 200 234 / 0.16);
	--accent-text: #03161e;
	--you: rgb(79 200 234 / 0.18);
}

/* Hearthflame: lava falls and a burning sunset */
:root[data-theme="hearthflame"] {
	--art: url("/art/hearthflame.jpg");
	--mask: url("/masks/hearthflame.png");
	--bg: #190c08;
	--panel: rgb(29 14 10 / 0.86);
	--text: #f8ece1;
	--muted: #c8aa98;
	--border: rgb(255 142 82 / 0.24);
	--accent: #ff8a3d;
	--accent-soft: rgb(255 138 61 / 0.16);
	--accent-text: #2a0c02;
	--you: rgb(255 138 61 / 0.18);
}

/* Cornerstone: lavender stone and quiet mist */
:root[data-theme="cornerstone"] {
	--art: url("/art/cornerstone.jpg");
	--mask: url("/masks/cornerstone.png");
	--bg: #110f19;
	--panel: rgb(21 18 30 / 0.86);
	--text: #f0edf7;
	--muted: #b4acc8;
	--border: rgb(190 172 240 / 0.22);
	--accent: #bba8f2;
	--accent-soft: rgb(187 168 242 / 0.16);
	--accent-text: #150e2a;
	--you: rgb(187 168 242 / 0.18);
}

:root:is([data-theme="teal"], [data-theme="wellspring"], [data-theme="hearthflame"], [data-theme="cornerstone"])::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(140% 100% at 50% 25%, transparent 50%, rgb(0 0 0 / 0.45) 100%),
		linear-gradient(180deg, color-mix(in srgb, var(--bg) 15%, transparent), color-mix(in srgb, var(--bg) 35%, transparent) 40%,
			color-mix(in srgb, var(--bg) 68%, transparent)),
		var(--art) center 35% / cover no-repeat;
}
:root:is([data-theme="teal"], [data-theme="wellspring"], [data-theme="hearthflame"], [data-theme="cornerstone"]) body { background: transparent; }