/* Loaded after the shared theme. The light palette remains the CSS fallback;
   these tokens change appearance without changing layout or artwork. */
html[data-theme="dark"] {
  color-scheme: dark;
  --theme-color-scheme: dark;
  --theme-surface: #1c1f20;
  --theme-raised: #25292a;
  --theme-border: #373c3d;
  --theme-text: #eceeeb;
  --theme-muted: #a9afac;
  --theme-surface-rgb: 28, 31, 32;
  --theme-raised-rgb: 37, 41, 42;
  --theme-border-rgb: 55, 60, 61;
  --theme-text-rgb: 236, 238, 235;
  --theme-muted-rgb: 169, 175, 172;
  --bg: #151718;
  --bg1: #151718;
  --bg2: var(--theme-raised);
  --card: var(--theme-surface);
  --surface: var(--theme-surface);
  --surface-2: var(--theme-raised);
  --surface-3: #303536;
  --text: var(--theme-text);
  --muted: var(--theme-muted);
  --text-2: #cbd0cc;
  --text-3: var(--theme-muted);
  --text-4: #969e99;
  --border: var(--theme-border);
  --border-strong: #535b57;
  --accent: #566b4c;
  --accent-soft: #2a3527;
  --accent-text: #c1dea9;
  --brand: #c1dea9;
  --ink-900: #151718;
  --ink-850: #191c1d;
  --ink-800: var(--theme-surface);
  --ink-700: var(--theme-raised);
  --ink-600: #303536;
  --paper: var(--theme-text);
  --paper-dim: #bbc2bc;
  --paper-mute: var(--theme-muted);
  --paper-ghost: #424846;
  --red: #c1dea9;
  --red-hot: #d3eac1;
  --red-deep: #92b779;
  --gold: #d6bc82;
  --gold-lt: #e6cf9f;
  --gold-deep: #b2955a;
  --line: #303536;
  --line-mid: var(--theme-border);
  --line-hot: #535b57;
  --shadow-sm: 0 2px 8px #0003;
  --shadow-md: 0 8px 24px #0004;
  --shadow-lg: 0 20px 60px #0006;
  --focus: 0 0 0 3px #a7cf7d55;
  --pos: #87cfab;
  --pos-soft: #223a2c;
  --neg: #f2a284;
  --neg-soft: #432d25;
  --warn: #dfbd78;
  --warn-soft: #3a3222;
  --info: #a2c4f6;
  --info-soft: #26354b;
  --danger: #f29f9f;
  --danger-soft: #42292b;
}

html[data-theme="dark"] body.bx { background: var(--bg); }
html[data-theme="dark"] :is(input, select, textarea) { color-scheme: dark; }
html[data-theme="dark"] :is(a, button, input, select, textarea, summary):focus-visible {
  outline-color: #b8d99e;
}

/* Keep the same soft green and gold accents, on deeper tinted surfaces. */
html[data-theme="dark"] :is(.bx-premium, .app-ui .inv-stat-value, .app-ui .upgrade-hero, .app-ui .quick-rail-btn.has-notifications) {
  background: #283225;
  border-color: #43523a;
}
html[data-theme="dark"] :is(.bx-premium-copy .is-gold, .bx-premium-list, .bx-premium-num-u, .bx-check, .app-ui .inv-stat-value strong, .app-ui .inv-state-mark, .app-ui .inv-text-button, .app-ui .inv-card a, .app-ui .collector-record a, .app-ui .collector-section > summary:hover h2, .app-ui .collector-delta.is-up, .app-ui .bx-mobile-nav a[aria-current="page"]) {
  color: #b9d6a2;
}
html[data-theme="dark"] .bx-premium-img { mix-blend-mode: normal; }
html[data-theme="dark"] :is(.app-ui .camp-connect, .app-ui .inv-notice) {
  background: #342e22;
  border-color: #5b4d30;
  color: #dfc693;
}
html[data-theme="dark"] .app-ui :is(.pf-main, .pf-dialog) {
  --ok: #87cfab;
  --ok-soft: #223a2c;
  --ok-ring: #406d4e;
  --warn: #dfbd78;
  --warn-soft: #3a3222;
  --warn-ring: #6b5834;
  --danger: #f29f9f;
  --danger-soft: #42292b;
  --danger-ring: #774449;
  --gold-soft: #352f23;
  --gold-ring: #665839;
}
html[data-theme="dark"] .app-ui .collector-delta.is-down { color: #f29f9f; }
html[data-theme="dark"] .bx-footer-discord img { filter: grayscale(1) brightness(2); }

/* Shareable recap artwork has its own palette, independent of site appearance. */
.recap-slide {
  --theme-surface: initial;
  --theme-raised: initial;
  --theme-border: initial;
  --theme-text: initial;
  --theme-muted: initial;
  --theme-surface-rgb: initial;
  --theme-raised-rgb: initial;
  --theme-border-rgb: initial;
  --theme-text-rgb: initial;
  --theme-muted-rgb: initial;
}

/* Primary actions retain the monochrome pill treatment. */
html[data-theme="dark"] :is(.bx .bx-btn:not(.bx-btn-ghost), .app-ui button[type="submit"], .app-ui .link-btn.is-primary, .app-ui .link-btn[data-variant="primary"], .app-ui .side-footer-button-link, .app-ui .bx-btn, .app-ui .recap-cta-btn, .app-ui .comp-btn-primary, .app-ui .buttonupgrade, .app-ui .upgrade-link, .app-ui .upgrade-pay-btn, .cookie-banner__btn--accept, .admin-ui .btn.primary) {
  background: #e2e7df;
  border-color: #e2e7df;
  color: #1c231a;
}
html[data-theme="dark"] :is(.bx .bx-btn:not(.bx-btn-ghost), .app-ui button[type="submit"], .app-ui .link-btn.is-primary, .app-ui .side-footer-button-link, .app-ui .bx-btn, .app-ui .buttonupgrade, .app-ui .upgrade-pay-btn, .cookie-banner__btn--accept, .admin-ui .btn.primary):hover {
  background: #c9d6c1;
  border-color: #c9d6c1;
}

/* A dedicated header control keeps the toggle visible beside the mobile menu. */
body .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  clip-path: none;
  transition: background 0.18s, border-color 0.18s;
}
body .theme-toggle:hover { background: var(--surface-3); border-color: var(--border-strong); }
body .theme-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.theme-toggle svg { width: 18px; height: 18px; pointer-events: none; }
.theme-toggle .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
body .theme-toggle-standalone { position: fixed; right: 20px; bottom: 20px; z-index: 250; box-shadow: var(--shadow-md); }

@media (max-width: 600px) {
  .bx .bx-header-in, .app-ui .bx-header-in { gap: 8px; }
  .bx-header-in > .bx-burger { margin-left: 0; flex-shrink: 0; }
}
@media (max-width: 380px) {
  /* My Account remains available in the mobile navigation. */
  .bx .bx-header-actions #home-account-btn { display: none; }
}