/* =====================================================================
   dark-theme.css
   Redefines the *colour* tokens from tokens.css for dark mode — nothing
   else. Because every other stylesheet already reads var(--ink),
   var(--paper) and so on instead of hardcoded colours, this file is the
   only place dark mode has to be taught anything.

   Two ways a page ends up dark:
   1. The visitor's device/browser prefers dark, and they haven't
      chosen a preference on this site yet (the @media block below).
   2. They clicked the theme toggle (added later, in theme-toggle.js),
      which sets data-theme="dark" directly on <html> and is saved so
      it's remembered on their next visit — that's the [data-theme]
      block below, which wins over the @media query either way.
   ===================================================================== */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--paper:   #0D1020;
		--surface: #151A30;
		--ink:     #EEF1F8;
		--muted:   #A5AEC8;
		--line:    #2A3050;

		--brand-text: #9BA9FF; /* brightened so it still reads on dark backgrounds */
	}
}

:root[data-theme="dark"] {
	--paper:   #0D1020;
	--surface: #151A30;
	--ink:     #EEF1F8;
	--muted:   #A5AEC8;
	--line:    #2A3050;

	--brand-text: #9BA9FF;
}

/* Explicitly choosing light mode always wins, even on a dark device —
   this selector exists only so the block above has something to
   exclude; it doesn't need to redeclare the (already-default) colours. */
:root[data-theme="light"] {
	color-scheme: light;
}
:root:not([data-theme="light"]) {
	color-scheme: light dark;
}