/* Dark Mode overrides for karimi.me static pages
   Activates when html has saved-theme="dark" attribute.
   Compatible with Quartz dark-mode (same attribute, same localStorage key). */

html[saved-theme="dark"] {
  --cream: #1A1812;
  --cream-deep: #14120D;
  --paper: #221F1A;
  --ink: #F5EFE0;
  --ink-soft: #C3BAA4;
  --ink-mute: #8C8676;
  --rule: #3A352D;
  --rule-soft: #2D2A24;
  /* Accents stay visible */
  --pomegranate: #B85055;
  --saffron: #E2B254;
  --teal: #4A8A9C;
  --teal-deep: #2D5868;
  --coral: #F09573;
  --azure: #5BA9C2;
  --olive: #8FA567;
  --saffron-bright: #F0C870;
}

html[saved-theme="dark"] body {
  background: var(--cream);
  color: var(--ink);
}

html[saved-theme="dark"] header {
  background: rgba(26,24,18,0.92) !important;
}

html[saved-theme="dark"] h1,
html[saved-theme="dark"] h2,
html[saved-theme="dark"] h3 {
  color: var(--ink);
}
html[saved-theme="dark"] .deck,
html[saved-theme="dark"] .lede {
  color: var(--ink-soft);
}

html[saved-theme="dark"] .section-card,
html[saved-theme="dark"] .day-card,
html[saved-theme="dark"] .trip,
html[saved-theme="dark"] .callout {
  background: var(--paper);
}

html[saved-theme="dark"] .cover-plate {
  border-color: var(--ink);
}

/* Smooth transitions when toggling */
html, body, header, .section-card, .day-card, .trip, .callout, .cover-plate {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

html[saved-theme="dark"] #k-theme-toggle {
  background: rgba(245,239,224,0.18) !important;
  color: #F5EFE0;
}