@import "tokens.css";

/* ---------------------------------------------------------------------------
   Light / dark mode for the Headline theme.

   The theme's palette lives in :root as raw tokens (--color-white is used for
   surfaces, --color-darker-gray for near-black text). We remap those tokens
   under [data-theme="dark"] and add a few explicit fixes where a raw token is
   used ambiguously (footer/header/images).

   The <html> element gets data-theme="light" | "dark" from the inline no-flash
   script in the <head> before first paint. When no explicit choice is stored,
   the visitor's OS preference wins.

   NOTE: this file is INLINED (minified) into the <style> block in
   src/_includes/partials/head.njk to save a render-blocking request — it is
   no longer linked from <head>. If you edit rules here, re-sync that copy.
--------------------------------------------------------------------------- */

:root {
	color-scheme: light;
	--gh-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

:root[data-theme="dark"] {
	color-scheme: dark;
}

/* Smooth the switch on the big surfaces */
body,
.gh-head,
.gh-foot,
.gh-card,
.gh-article,
.gh-content {
	transition: var(--gh-transition);
}

/* --- Explicit fixes: elements whose colours are hard-coded or ambiguous --- */

:root[data-theme="dark"] body {
	background-color: var(--color-background);
}

/* Header sits on the page surface */
:root[data-theme="dark"] .gh-head {
	background-color: var(--color-surface);
	border-color: var(--color-light-gray);
}

/* Footer keeps a darker slab with light text (it hard-codes white text) */
:root[data-theme="dark"] .gh-foot {
	background-color: var(--color-background);
}
:root[data-theme="dark"] .gh-foot,
:root[data-theme="dark"] .gh-foot a,
:root[data-theme="dark"] .gh-foot a:hover {
	color: var(--color-primary-text);
}

/* Card / topic dividers */
:root[data-theme="dark"] .gh-topic,
:root[data-theme="dark"] .gh-card-link {
	border-color: var(--color-light-gray);
}

/* Slightly calm images in dark mode */
:root[data-theme="dark"] .gh-card-image img,
:root[data-theme="dark"] .gh-article-image img,
:root[data-theme="dark"] .gh-cover-image {
	filter: brightness(0.88) contrast(1.02);
}

/* Code blocks */
:root[data-theme="dark"] .gh-content pre {
	background-color: var(--color-background);
	border: 1px solid var(--color-light-gray);
}

/* --- The toggle button ---------------------------------------------------- */
.gh-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	border-radius: 50%;
}
.gh-theme-toggle:hover {
	background: var(--color-hover-wash);
}
.gh-theme-toggle svg {
	width: 20px;
	height: 20px;
}
/* Show sun in dark mode, moon in light mode */
.gh-theme-toggle .icon-sun {
	display: none;
}
.gh-theme-toggle .icon-moon {
	display: block;
}
:root[data-theme="dark"] .gh-theme-toggle .icon-sun {
	display: block;
}
:root[data-theme="dark"] .gh-theme-toggle .icon-moon {
	display: none;
}