/* Light / dark theme for the sayings pages.
   The early script in <head> sets data-theme before paint; theme.js wires up the toggle in the nav. */
html[data-theme="dark"] {
  color-scheme: dark;
  --black: #ece7dc;
  --ink: #e4dfd4;
  --white: #14171f;
  --grey: #8f8b83;
  --soft-grey: #b3ada2;
  --light-grey: #2c303a;
  --cream: #1b1f2a;
  --edge: #3a3f4b;
}

/* The playing cards stay printed cards: dark ink on cream. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .pile-under { --black: #0a0a0a; --ink: #1a1a1a; }
html[data-theme="dark"] .card { box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); }

/* Toggle: sits in the nav after Sayings * Book */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; padding: 0; margin: 0;
  border: 0; background: none; color: var(--black); cursor: pointer;
  align-self: center; border-radius: 50%; margin-top: -0.5rem;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { opacity: 0.65; }
.theme-toggle:focus-visible { outline: 1px solid var(--black); outline-offset: 2px; }
.theme-toggle { position: relative; }
.theme-toggle svg {
  position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; display: block;
  transition: transform 0.5s cubic-bezier(.4, 0, .2, 1), opacity 0.3s ease;
}
.theme-toggle .i-sun { opacity: 0; transform: rotate(-90deg) scale(0.4); }
html[data-theme="dark"] .theme-toggle .i-sun { opacity: 1; transform: none; }
html[data-theme="dark"] .theme-toggle .i-moon { opacity: 0; transform: rotate(90deg) scale(0.4); }

/* While switching, ease the page's colours instead of snapping */
html.theme-anim, html.theme-anim body, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition-property: background-color, color, border-color, fill, stroke, box-shadow, opacity, transform !important;
  transition-duration: 0.45s !important;
  transition-timing-function: ease !important;
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle svg { transition: none; }
  html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: none !important; }
}

/* Book page bits with fixed colours */
html[data-theme="dark"] .carousel-stage,
html[data-theme="dark"] .cover-reveal-image { background-color: #1e222c; }
html[data-theme="dark"] .product-detail--combo { background-color: #1b1f2a; }
html[data-theme="dark"] .carousel-dots span { background: rgba(236, 231, 220, 0.22); }
html[data-theme="dark"] .carousel-dots span.is-active { background: rgba(236, 231, 220, 0.75); }
html[data-theme="dark"] .carousel-btn { background: var(--white); border-color: rgba(236, 231, 220, 0.18); }
html[data-theme="dark"] .carousel-btn:hover { color: var(--white); }
html[data-theme="dark"] .product-detail .specs-table th,
html[data-theme="dark"] .product-detail .specs-table td { border-bottom-color: rgba(236, 231, 220, 0.12); }
html[data-theme="dark"] .btn-order,
html[data-theme="dark"] .btn-order[aria-disabled="true"]:hover { color: var(--white); }
html[data-theme="dark"] .btn-order:hover,
html[data-theme="dark"] .btn-order[aria-expanded="true"] { background: var(--white); color: var(--black); }
html[data-theme="dark"] footer::before { opacity: 0.12; }