/* Colours only; layout stays in main.css.
   The theme is chosen by data-theme on <html>, which script/theme.js sets.
   Plain :root is the fallback when JavaScript is off. */

/* ---------- Dark (your current palette) ---------- */
:root,
:root[data-theme="dark"] {
	--theme-name: dark;   /* read by theme.js to confirm this stylesheet applied */
	--bg:      #0c0c0e;   /* page */
	--panel:   #141418;   /* content pane, menu, buttons */
	--line:    #3c3c3e;   /* 1px borders, hover fill */
	--fg:      #c0c0e0;   /* text */
	--muted:   #808091;   /* footer text, control borders */
	--accent:  #d03bcf;   /* title, header rule, current page */
	--focus:   #ffb000;   /* keyboard focus ring */
	color-scheme: dark;
}

/* ---------- Light: silver ---------- */
/* A cool mid-grey rather than white, to be easy on the eyes. The magenta and
   amber are deepened so they stay readable against it. */
:root[data-theme="light"] {
	--theme-name: light;
	--bg:      #b8bbc3;   /* silver page */
	--panel:   #cbced5;   /* lighter silver: content pane, menu, buttons */
	--line:    #8a8d97;   /* 1px borders, hover fill */
	--fg:      #14141a;   /* text */
	--muted:   #40404c;   /* footer text, control borders */
	--accent:  #80167f;   /* title, header rule, current page */
	--focus:   #7a4a00;   /* keyboard focus ring */
	color-scheme: light;
}

/* ---------- Night: red light only, to protect night vision ---------- */
/* Every colour here has its green and blue channels at zero. Text is deliberately
   dim, about 3.8:1 against the background, below the 4.5:1 usually advised for
   body text, to go easy on dark-adapted eyes. */
:root[data-theme="night"] {
	--theme-name: night;
	--bg:      #000000;
	--panel:   #0f0000;
	--line:    #3d0000;
	--fg:      #d80000;
	--muted:   #bc0000;
	--accent:  #e60000;
	--focus:   #e60000;
	color-scheme: dark;
}

/* Night is just the palette above, with nothing laid over the page: a full-screen
   blend layer is fragile on some mobile browsers. What the palette cannot reach is
   handled by hand. */

/* Browsers colour links blue and purple by default. Keep them red. */
:root[data-theme="night"] a,
:root[data-theme="night"] a:visited {
	color: var(--accent);
}

/* The default text-selection highlight is blue. */
:root[data-theme="night"] ::selection {
	background: var(--line);
	color: var(--fg);
}

/* CSS filters cannot turn a photo red-only (tested: the highlights drift to yellow),
   so photos are greyscale and dimmed instead. */
:root[data-theme="night"] #content img,
:root[data-theme="night"] #content video,
:root[data-theme="night"] #header img {
	filter: grayscale(1) brightness(0.7);
}

/* ---------- Theme picker (lives in the status bar) ---------- */
#theme-picker {
	flex: none;
	margin-inline-start: auto;   /* pushes it to the right end of the status bar */
	white-space: nowrap;
}

#theme {
	min-height: 2.25rem;
	padding-inline: 0.25rem;
	border: 1px solid var(--muted);
	border-radius: 4px;
	background: var(--panel);
	color: var(--fg);
	font: inherit;
}

#theme:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}