/* Hell/Dunkel-Variablenpaare fuer das "Standard-Layout" (index.php, budgettracking/*).
   Struktur wie quiz/trainer.css's bereits vorhandenes System: ein bare :root (= dunkel,
   damit sich am heutigen Erscheinungsbild ohne Interaktion nichts aendert), eine
   @media(prefers-color-scheme)-Verschlechterung ohne JS, und :root[data-theme="..."],
   die includes/theme.js ansteuert und die hoehere Spezifitaet gewinnt.

   NICHT auf mathe-trainer-Seiten einbinden - das React-Bundle und duell.html/
   gemeinschaft.html deklarieren selbst schon --accent (Bundle zusaetzlich --card-bg) auf
   :root; eine Einbindung hier wuerde kollidieren und die feste Pastellfarbgebung der
   Spielbildschirme mitfaerben. mathe-trainer/chrome.css hat deshalb ein eigenes,
   eindeutig praefigiertes Variablenset (--mtchrome-*). */

:root {
	--accent: #4f8ef7;
	--accent-hover: #6fa6ff;
	--accent-rgb: 79, 142, 247;
	--card-bg: #1e2230;
	--body-bg: #12151e;
	--text-muted-custom: #8892a4;
	--border: #2a3050;

	--text-main: #d0d8e8;
	--text-strong: #e6ecf7;
	--text-emphasis: #c8d0e0;
	--text-link: #b0bcd4;
	--hover-bg: #252c42;
	--border-soft: #232840;
	--body-bg-1: #1a2340;
	--body-bg-2: #12151e;
	--banner-bg-1: #1a2a4a;
	--banner-bg-2: #1e2230;
	--banner-border: #2a3a5a;
	--banner-text: #a8c0e8;
	--tag-bg: #1a2340;
	--tag-border: #2a3a5a;
	--tag-text: #7a9cc8;
	--row-highlight-bg: #1a2340;
	--row-highlight-text: #d8e2f5;
	--input-bg: #171b28;
	--ok-bg: #17301f;
	--ok-border: #2c5c3a;
	--ok-text: #9fdcae;
	--warn-bg: #33251a;
	--warn-border: #6b4a2c;
	--warn-text: #e8c08f;
	--err-bg: #331a1e;
	--err-border: #6b2c34;
	--err-text: #e8949c;
	--positive: #7ecb8a;
	--negative: #e8737d;

	--role-admin: #f5a623;
	--role-reader: #7ecb8a;
	--role-budget: #6fc3d8;
	--role-gast: #8892a4;
}

@media (prefers-color-scheme: light) {
	:root {
		--accent: #2f6fd6;
		--accent-hover: #1d56b0;
		--accent-rgb: 47, 111, 214;
		--card-bg: #ffffff;
		--body-bg: #f5f7fb;
		--text-muted-custom: #64748b;
		--border: #d7dee8;

		--text-main: #1e2430;
		--text-strong: #101522;
		--text-emphasis: #2b3242;
		--text-link: #3a4356;
		--hover-bg: #eef1f8;
		--border-soft: #e7ebf3;
		--body-bg-1: #eef3fc;
		--body-bg-2: #f5f7fb;
		--banner-bg-1: #e7f0fd;
		--banner-bg-2: #eef3fb;
		--banner-border: #cfe0f7;
		--banner-text: #274a7a;
		--tag-bg: #e9f0fc;
		--tag-border: #cfe0f7;
		--tag-text: #2f6fd6;
		--row-highlight-bg: #e9f0fc;
		--row-highlight-text: #1c3a63;
		--input-bg: #ffffff;
		--ok-bg: #e6f6ea;
		--ok-border: #a8dab8;
		--ok-text: #1e6b34;
		--warn-bg: #fdf0dc;
		--warn-border: #e3b979;
		--warn-text: #8a5a12;
		--err-bg: #fbe4e6;
		--err-border: #e3a3ab;
		--err-text: #8a2430;
		--positive: #1e8f4a;
		--negative: #c23548;

		--role-admin: #b5720a;
		--role-reader: #2f8f52;
		--role-budget: #1f8fa8;
		--role-gast: #5b6472;
	}
}

:root[data-theme="dark"] {
	--accent: #4f8ef7;
	--accent-hover: #6fa6ff;
	--accent-rgb: 79, 142, 247;
	--card-bg: #1e2230;
	--body-bg: #12151e;
	--text-muted-custom: #8892a4;
	--border: #2a3050;

	--text-main: #d0d8e8;
	--text-strong: #e6ecf7;
	--text-emphasis: #c8d0e0;
	--text-link: #b0bcd4;
	--hover-bg: #252c42;
	--border-soft: #232840;
	--body-bg-1: #1a2340;
	--body-bg-2: #12151e;
	--banner-bg-1: #1a2a4a;
	--banner-bg-2: #1e2230;
	--banner-border: #2a3a5a;
	--banner-text: #a8c0e8;
	--tag-bg: #1a2340;
	--tag-border: #2a3a5a;
	--tag-text: #7a9cc8;
	--row-highlight-bg: #1a2340;
	--row-highlight-text: #d8e2f5;
	--input-bg: #171b28;
	--ok-bg: #17301f;
	--ok-border: #2c5c3a;
	--ok-text: #9fdcae;
	--warn-bg: #33251a;
	--warn-border: #6b4a2c;
	--warn-text: #e8c08f;
	--err-bg: #331a1e;
	--err-border: #6b2c34;
	--err-text: #e8949c;
	--positive: #7ecb8a;
	--negative: #e8737d;

	--role-admin: #f5a623;
	--role-reader: #7ecb8a;
	--role-budget: #6fc3d8;
	--role-gast: #8892a4;
}

:root[data-theme="light"] {
	--accent: #2f6fd6;
	--accent-hover: #1d56b0;
	--accent-rgb: 47, 111, 214;
	--card-bg: #ffffff;
	--body-bg: #f5f7fb;
	--text-muted-custom: #64748b;
	--border: #d7dee8;

	--text-main: #1e2430;
	--text-strong: #101522;
	--text-emphasis: #2b3242;
	--text-link: #3a4356;
	--hover-bg: #eef1f8;
	--border-soft: #e7ebf3;
	--body-bg-1: #eef3fc;
	--body-bg-2: #f5f7fb;
	--banner-bg-1: #e7f0fd;
	--banner-bg-2: #eef3fb;
	--banner-border: #cfe0f7;
	--banner-text: #274a7a;
	--tag-bg: #e9f0fc;
	--tag-border: #cfe0f7;
	--tag-text: #2f6fd6;
	--row-highlight-bg: #e9f0fc;
	--row-highlight-text: #1c3a63;
	--input-bg: #ffffff;
	--ok-bg: #e6f6ea;
	--ok-border: #a8dab8;
	--ok-text: #1e6b34;
	--warn-bg: #fdf0dc;
	--warn-border: #e3b979;
	--warn-text: #8a5a12;
	--err-bg: #fbe4e6;
	--err-border: #e3a3ab;
	--err-text: #8a2430;
	--positive: #1e8f4a;
	--negative: #c23548;

	--role-admin: #b5720a;
	--role-reader: #2f8f52;
	--role-budget: #1f8fa8;
	--role-gast: #5b6472;
}

.theme-toggle {
	font: inherit;
	font-size: 0.8rem;
	padding: 0.3rem 0.8rem;
	border-radius: 20px;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	cursor: pointer;
	opacity: 0.85;
}
.theme-toggle:hover { opacity: 1; }