/* Dark theme (follows the system setting) and the light/dark toggle, shared by every page.
   The inline snippet in each page's <head> sets html[data-theme] before first paint. */

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

/* blog pages read these variables */
html[data-theme="dark"] {
	--bg: #1b2433; --ink: #d5dae2; --ink-2: #b3bccb; --muted: #94a0b3; --rule: #33405a;
	--card: #232e40; --card-hover: #2b384d; --link: #7ab4f5;
	--figure-bg: #ffffff;
}

html[data-theme="dark"] body { background: #1b2433; color: #d5dae2; }
html[data-theme="dark"] a { color: #7ab4f5; }
html[data-theme="dark"] a:hover { color: #f2a65a; }
html[data-theme="dark"] h1,
html[data-theme="dark"] h2 { color: #f1f4f8; }

/* homepage and blog index */
html[data-theme="dark"] h2 { border-bottom-color: #33405a; }
html[data-theme="dark"] h3.subhead,
html[data-theme="dark"] details.math > summary { color: #c3cbd8; }
html[data-theme="dark"] details.math > summary:hover { color: #7ab4f5; }
html[data-theme="dark"] details.math > summary::before { color: #7ab4f5; }
html[data-theme="dark"] .hero-email,
html[data-theme="dark"] .note,
html[data-theme="dark"] ul.news .when,
html[data-theme="dark"] .pub-title .num,
html[data-theme="dark"] .pub-venue,
html[data-theme="dark"] .footer,
html[data-theme="dark"] ul.posts .when { color: #94a0b3; }
html[data-theme="dark"] .desc,
html[data-theme="dark"] .pub-note,
html[data-theme="dark"] details.abs p { color: #b3bccb; }
html[data-theme="dark"] details.abs summary { color: #7ab4f5; }
html[data-theme="dark"] details.abs p { border-left-color: #3a4762; }
html[data-theme="dark"] .footer { border-top-color: #33405a; }

/* blog posts */
html[data-theme="dark"] .pair > div { background: #232e40; }
html[data-theme="dark"] .pair .bug { color: #f28b82; }
html[data-theme="dark"] .toc a { border-left-color: #33405a; color: #94a0b3; }
html[data-theme="dark"] .toc a.active { color: #f1f4f8; border-left-color: #7ab4f5; }
html[data-theme="dark"] figure.plain img { background: #ffffff; border-radius: 6px; padding: 8px; }

/* toggle button */
.theme-toggle {
	position: fixed; top: 14px; right: 16px; z-index: 10;
	width: 34px; height: 34px; border-radius: 50%; padding: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 17px; line-height: 1; cursor: pointer;
	background: #f4f3f0; color: #333; border: 1px solid #e6e5e1;
}
.theme-toggle:hover { border-color: #b9b8b3; }
html[data-theme="dark"] .theme-toggle { background: #232e40; color: #d5dae2; border-color: #3a4762; }
html[data-theme="dark"] .theme-toggle:hover { border-color: #5a6886; }