/* Prahran Publishing — light / dark theme
   Light is the house default (the warm paper palette each page defines inline).
   Dark swaps the same eight variables, so every page follows without being rewritten.
   Every dark value comes from the Prahran Publishing Design System (Claude Design):
   masthead overlay green-black #0F140F as the ground, stamp charcoal #25292B for cards,
   masthead inks #F7F2EA / #C8BFA8 for type, duck egg #D3E6DF / #EEF5F1 for links,
   bottle green #2A4232 / #3D5A47 for buttons, stamp gold #D6BC7C for the toggle, rust rule #C8956A for notes.
   Dark applies when the visitor's system is dark, unless they chose Light with the toggle;
   the toggle sets data-theme on <html> and the choice is remembered on this device (theme.js). */

:root { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0F140F;
    --bg-card: #25292B;
    --text: #F7F2EA;
    --text-muted: #C8BFA8;
    --accent: #D3E6DF;
    --accent-light: #EEF5F1;
    --border: rgba(247, 242, 234, 0.18);
    --cream: #25292B;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F140F;
  --bg-card: #25292B;
  --text: #F7F2EA;
  --text-muted: #C8BFA8;
  --accent: #D3E6DF;
  --accent-light: #EEF5F1;
  --border: rgba(247, 242, 234, 0.18);
  --cream: #25292B;
}

/* ---------- Dark: things the variables don't reach ----------
   The two blocks below are identical on purpose: one for "system is dark and no choice made",
   one for "visitor chose dark". Keep them in step. */
@media (prefers-color-scheme: dark) {
  /* Solid hairline under the masthead (a translucent one lets the banner photo show through). */
  :root:not([data-theme="light"]) header { border-bottom-color: #25292B; }
  /* Trade page masthead: its own espresso brown clashes with the green-black ground; use the stamp charcoal. */
  :root:not([data-theme="light"]) header.masthead { background: #25292B; }
  /* Solid buttons keep the bottle-green fill with white type (the accent variable is now pale duck egg, for links and outlines). */
  :root:not([data-theme="light"]) .buy-btn:not(.secondary),
  :root:not([data-theme="light"]) .submit-btn,
  :root:not([data-theme="light"]) .list-cta-btn,
  :root:not([data-theme="light"]) .btn,
  :root:not([data-theme="light"]) .btn-solid,
  :root:not([data-theme="light"]) .trade-btn:hover,
  :root:not([data-theme="light"]) .done .tick,
  :root:not([data-theme="light"]) button:not(.theme-toggle) { background: #3D5A47; color: #fff; }
  :root:not([data-theme="light"]) .buy-btn:not(.secondary):hover,
  :root:not([data-theme="light"]) .submit-btn:hover,
  :root:not([data-theme="light"]) .list-cta-btn:hover,
  :root:not([data-theme="light"]) .btn:hover,
  :root:not([data-theme="light"]) .btn-solid:hover,
  :root:not([data-theme="light"]) button:not(.theme-toggle):hover { background: #2A4232; color: #fff; outline: 1px solid #D3E6DF; outline-offset: -1px; }
  :root:not([data-theme="light"]) .chapter-spoiler { color: #C8956A; }
  :root:not([data-theme="light"]) input[type=email], :root:not([data-theme="light"]) input[type=text],
  :root:not([data-theme="light"]) input[type=tel], :root:not([data-theme="light"]) select,
  :root:not([data-theme="light"]) textarea { background: var(--bg-card); color: var(--text); }
  :root:not([data-theme="light"]) .msg.err { background: var(--bg-card); }
}
:root[data-theme="dark"] header { border-bottom-color: #25292B; }
:root[data-theme="dark"] header.masthead { background: #25292B; }
:root[data-theme="dark"] .buy-btn:not(.secondary),
:root[data-theme="dark"] .submit-btn,
:root[data-theme="dark"] .list-cta-btn,
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .btn-solid,
:root[data-theme="dark"] .trade-btn:hover,
:root[data-theme="dark"] .done .tick,
:root[data-theme="dark"] button:not(.theme-toggle) { background: #3D5A47; color: #fff; }
:root[data-theme="dark"] .buy-btn:not(.secondary):hover,
:root[data-theme="dark"] .submit-btn:hover,
:root[data-theme="dark"] .list-cta-btn:hover,
:root[data-theme="dark"] .btn:hover,
:root[data-theme="dark"] .btn-solid:hover,
:root[data-theme="dark"] button:not(.theme-toggle):hover { background: #2A4232; color: #fff; outline: 1px solid #D3E6DF; outline-offset: -1px; }
:root[data-theme="dark"] .chapter-spoiler { color: #C8956A; }
:root[data-theme="dark"] input[type=email], :root[data-theme="dark"] input[type=text],
:root[data-theme="dark"] input[type=tel], :root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { background: var(--bg-card); color: var(--text); }
:root[data-theme="dark"] .msg.err { background: var(--bg-card); }

/* ---------- Theme toggle ----------
   Sits in the top-right of the banner. The banner is a dark photograph in both themes,
   so the icon is always light; only the sun / moon changes. */
.theme-toggle {
  position: absolute; top: 12px; right: 14px; z-index: 5;
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  color: #F7F2EA; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55));
  transition: color 0.2s ease, background-color 0.2s ease;
}
.theme-toggle:hover { color: #D6BC7C; background: rgba(0,0,0,0.25); }
.theme-toggle:focus-visible { outline: 2px solid #D6BC7C; outline-offset: 2px; }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme]) .theme-toggle .i-moon { display: none; }
}
@media print { .theme-toggle { display: none; } }