/* =============================================================
   Dark theme — protasov.rocks

   Two trigger conditions, both produce identical overrides:
   1. Auto  — @media (prefers-color-scheme: dark) on html:not(.light)
   2. Manual — html.dark class set by theme toggle

   Forcing light against a dark system: html.light class
   prevents the :not(.light) media-query rules from firing.
   ============================================================= */

/* ---------- Auto dark (CSS media query) ---------- */
@media (prefers-color-scheme: dark) {
  html:not(.light) body { background: #171410; color: #EAE3D8; }
  html:not(.light) ::selection { background: #C97046; color: #171410; }
  html:not(.light) #navbar.scrolled { background: rgba(23, 20, 16, 0.95); border-bottom-color: #2B2620; }

  html:not(.light) .bg-paper { background-color: #171410; }
  html:not(.light) .bg-ink   { background-color: #0F0D0A; }
  html:not(.light) .bg-pale  { background-color: #2B2620; }
  html:not(.light) .bg-rust  { background-color: #C97046; }

  html:not(.light) .text-ink   { color: #EAE3D8; }
  html:not(.light) .text-muted { color: #7E7669; }
  html:not(.light) .text-cream { color: #B5ADA3; }
  html:not(.light) .text-rust  { color: #C97046; }
  html:not(.light) .text-pale  { color: #3C3530; }

  html:not(.light) .text-cream\/40 { color: rgba(181, 173, 163, 0.4); }
  html:not(.light) .text-cream\/55 { color: rgba(181, 173, 163, 0.55); }
  html:not(.light) .text-cream\/60 { color: rgba(181, 173, 163, 0.6); }

  html:not(.light) .hover\:text-ink:hover  { color: #EAE3D8; }
  html:not(.light) .hover\:text-rust:hover { color: #C97046; }
  html:not(.light) .group:hover .group-hover\:text-rust { color: #C97046; }

  html:not(.light) .border-pale              { border-color: #2B2620; }
  html:not(.light) .border-ink               { border-color: #EAE3D8; }
  html:not(.light) .hover\:border-rust:hover { border-color: #C97046; }

  html:not(.light) .rule      { background: #2B2620; }
  html:not(.light) .rule-dark { background: rgba(234, 227, 216, 0.07); }
  html:not(.light) .expertise-num { color: #2B2620; }

  html:not(.light) .prose h2,
  html:not(.light) .prose h3 { color: #EAE3D8; }
  html:not(.light) .prose p,
  html:not(.light) .prose ul,
  html:not(.light) .prose ol { color: #7E7669; }
  html:not(.light) .prose strong  { color: #EAE3D8; }
  html:not(.light) .prose a       { color: #C97046; }
  html:not(.light) .prose a:hover { color: #EAE3D8; }
  html:not(.light) .prose blockquote { border-left-color: #C97046; color: #7E7669; }
  html:not(.light) .prose code { background: #2B2620; color: #EAE3D8; }
  html:not(.light) .prose hr   { background: #2B2620; }

  html:not(.light) .icon-sun  { display: block; }
  html:not(.light) .icon-moon { display: none; }
}

@media (prefers-color-scheme: dark) and (min-width: 1024px) {
  html:not(.light) .photo-offset::after { border-color: #C97046; }
}

/* ---------- Manual dark (html.dark class) ---------- */
html.dark body { background: #171410; color: #EAE3D8; }
html.dark ::selection { background: #C97046; color: #171410; }
html.dark #navbar.scrolled { background: rgba(23, 20, 16, 0.95); border-bottom-color: #2B2620; }

html.dark .bg-paper { background-color: #171410; }
html.dark .bg-ink   { background-color: #0F0D0A; }
html.dark .bg-pale  { background-color: #2B2620; }
html.dark .bg-rust  { background-color: #C97046; }

html.dark .text-ink   { color: #EAE3D8; }
html.dark .text-muted { color: #7E7669; }
html.dark .text-cream { color: #B5ADA3; }
html.dark .text-rust  { color: #C97046; }
html.dark .text-pale  { color: #3C3530; }

html.dark .text-cream\/40 { color: rgba(181, 173, 163, 0.4); }
html.dark .text-cream\/55 { color: rgba(181, 173, 163, 0.55); }
html.dark .text-cream\/60 { color: rgba(181, 173, 163, 0.6); }

html.dark .hover\:text-ink:hover  { color: #EAE3D8; }
html.dark .hover\:text-rust:hover { color: #C97046; }
html.dark .group:hover .group-hover\:text-rust { color: #C97046; }

html.dark .border-pale              { border-color: #2B2620; }
html.dark .border-ink               { border-color: #EAE3D8; }
html.dark .hover\:border-rust:hover { border-color: #C97046; }

html.dark .rule      { background: #2B2620; }
html.dark .rule-dark { background: rgba(234, 227, 216, 0.07); }
html.dark .expertise-num { color: #2B2620; }

html.dark .prose h2,
html.dark .prose h3 { color: #EAE3D8; }
html.dark .prose p,
html.dark .prose ul,
html.dark .prose ol { color: #7E7669; }
html.dark .prose strong  { color: #EAE3D8; }
html.dark .prose a       { color: #C97046; }
html.dark .prose a:hover { color: #EAE3D8; }
html.dark .prose blockquote { border-left-color: #C97046; color: #7E7669; }
html.dark .prose code { background: #2B2620; color: #EAE3D8; }
html.dark .prose hr   { background: #2B2620; }

html.dark .icon-sun  { display: block; }
html.dark .icon-moon { display: none; }

@media (min-width: 1024px) {
  html.dark .photo-offset::after { border-color: #C97046; }
}

/* ---------- Theme toggle button ---------- */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.theme-toggle:hover { transform: rotate(18deg); }
html.dark .theme-toggle:hover { transform: rotate(-18deg); }
@media (prefers-color-scheme: dark) {
  html:not(.light) .theme-toggle:hover { transform: rotate(-18deg); }
}

.theme-toggle svg { width: 16px; height: 16px; display: block; }

/* Default: show moon (light mode), hide sun */
.icon-sun  { display: none; }
.icon-moon { display: block; }