/* Licht/donker thema. Wordt door alle pagina's geladen, na de eigen stijl van de pagina.
   theme.js zet data-theme="dark" of "light" op <html> en voegt de wisselknop toe aan de menubalk. */

:root {
	color-scheme: light;
	--dark: #16181a;        /* vlakken die altijd donker zijn: footer, samenvattingen */
	--on-green: #16181a;    /* tekst op groene knoppen */
	--line-strong: #b9c2b4;
	--line-hover: #c9d6c1;
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--ink: #eef2ea;
	--text: #d0d7cc;
	--muted: #9ba697;
	--bg: #101213;
	--card: #1a1d1f;
	--line: #2b302e;
	--line-strong: #4a524d;
	--line-hover: #5a6460;
	--green-soft: #1d2a19;
	--green-dark: #86d562;
	--dark: #08090a;
	--shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

/* Donkere vlakken op een donkere pagina een randje geven, zodat ze zich blijven onderscheiden */
:root[data-theme="dark"] .summary,
:root[data-theme="dark"] .price.featured { border: 1px solid var(--line); }
:root[data-theme="dark"] footer { border-top: 1px solid var(--line); }
:root[data-theme="dark"] .result-icon.err { background: #3a1c19; }

/* Wisselknop in de menubalk */
.nav-actions { display: flex; align-items: center; gap: 12px; }
.theme-toggle {
	width: 40px; height: 40px; flex: none;
	display: grid; place-items: center;
	border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .06); color: #e8ece6;
	cursor: pointer; padding: 0;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { background: rgba(255, 255, 255, .14); color: var(--green); border-color: rgba(255, 255, 255, .3); }
.theme-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.theme-toggle svg { width: 20px; height: 20px; }