/* ── Dark theme (default) ── */
:root,
[data-theme='dark'] {
	--bg: #2d3642;
	--bg-surface: #363f4e;
	--text: #ffffff;
	--text-muted: #9ba5b4;
	--border: #404b5c;
	--accent: #f97316;
	--bar-bg: rgba(38, 45, 56, 0.97);
	--hamburger-pill-bg: #404b5c;
	--hamburger-icon-color: #ccc;
	--countdown-overlay: rgba(0, 0, 0, 0.4);
	--countdown-hint: rgba(255, 255, 255, 0.5);
}

/* ── Light theme ── */
[data-theme='light'] {
	--bg: #ffffff;
	--bg-surface: #f5f5f5;
	--text: #1a1a1a;
	--text-muted: #888;
	--border: #e0e0e0;
	--accent: #f97316;
	--bar-bg: rgba(255, 255, 255, 0.97);
	--hamburger-pill-bg: #ebebeb;
	--hamburger-icon-color: #444;
	--countdown-overlay: rgba(255, 255, 255, 0.55);
	--countdown-hint: rgba(0, 0, 0, 0.4);
}

/* ── No-JS fallback: respect system preference when data-theme is absent ── */
@media (prefers-color-scheme: light) {
	:root:not([data-theme]) {
		--bg: #ffffff;
		--bg-surface: #f5f5f5;
		--text: #1a1a1a;
		--text-muted: #888;
		--border: #e0e0e0;
		--accent: #f97316;
		--bar-bg: rgba(255, 255, 255, 0.97);
		--hamburger-pill-bg: #ebebeb;
		--hamburger-icon-color: #444;
		--countdown-overlay: rgba(255, 255, 255, 0.55);
		--countdown-hint: rgba(0, 0, 0, 0.4);
	}
}

body {
	margin: 0;
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		Segoe UI,
		Oxygen,
		Ubuntu,
		Cantarell,
		Fira Sans,
		Droid Sans,
		Helvetica Neue,
		sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text);
	background-color: var(--bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em 0;
	font-weight: 400;
	line-height: 1.2;
}

h1 {
	font-size: 2em;
}

a {
	color: inherit;
}

code {
	font-family: menlo, inconsolata, monospace;
	font-size: calc(1em - 2px);
	color: var(--text-muted);
	background-color: var(--bg-surface);
	padding: 0.2em 0.4em;
	border-radius: 2px;
}

@media (min-width: 400px) {
	body {
		font-size: 16px;
	}
}