/* ============================================================
   theme.css — shared Candy Pop theme (loaded by every page)
   ------------------------------------------------------------
   Readability tweaks + dark-mode overrides that are identical on
   all pages. Page-specific styles (carousel, toc, .md-body,
   chip tints, ...) stay in each page's own <style> block.
   Load AFTER base.css, BEFORE any page <style>.
   ============================================================ */

/* Readability pass — lighter weights + looser tracking */
.font-black { font-weight: 700 !important; }
.font-extrabold { font-weight: 600 !important; }
.tracking-tight { letter-spacing: 0.01em !important; }
h1, h2, h3 { letter-spacing: 0.01em; }

/* ================= Dark mode — follows the browser/system theme (toggleable) ================= */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

html[data-theme="dark"] body { background-color: #14122b !important; color: #eceaf7 !important; }

/* Panels & cards */
html[data-theme="dark"] .bg-white { background-color: #1b1838 !important; }
html[data-theme="dark"] .bg-white\/80 { background-color: rgb(23 20 48 / 0.8) !important; }

/* Ink borders soften in the dark */
html[data-theme="dark"] .border-candy-ink { border-color: #3a3568 !important; }

/* Text */
html[data-theme="dark"] .text-candy-ink { color: #eceaf7 !important; }
html[data-theme="dark"] .text-candy-muted { color: #a9a3c9 !important; }
html[data-theme="dark"] .text-candy-purple { color: #b18cff !important; }
html[data-theme="dark"] .text-candy-purple-deep { color: #cbb8ff !important; }

/* Chunky hard shadows become soft depth in the dark */
html[data-theme="dark"] .shadow-lift-1, html[data-theme="dark"] .shadow-lift-2,
html[data-theme="dark"] .shadow-lift-3, html[data-theme="dark"] .shadow-lift-4,
html[data-theme="dark"] .shadow-lift-5, html[data-theme="dark"] .shadow-lift-6,
html[data-theme="dark"] .shadow-lift-8 {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
}

/* Secondary (Source) button stays legible on the dark background */
html[data-theme="dark"] .src-btn { background-color: #312a66 !important; color: #eceaf7 !important; }

/* Header nav hover + toggle icons */
html[data-theme="dark"] header nav .ml-auto a:hover { background-color: #ffcf00 !important; }
html[data-theme="dark"] #icon-sun { display: block; }
html[data-theme="dark"] #icon-moon { display: none; }