:root {
  /* Core surfaces */
  --theme-bg-page: #4b392b;
  --theme-bg-page-top: #5b4737;
  --theme-bg-app: #4b392b;
  --theme-bg-app-top: #5a4635;
  --theme-surface: #f0dfc1;
  --theme-surface-2: #e3cea9;
  --theme-surface-muted: #d9c2a0;
  --theme-surface-muted-2: #cbb08c;

  /* Text */
  --theme-text: #332518;
  --theme-text-strong: #332316;
  --theme-text-muted: #6d5641;
  --theme-text-inverse: #f3dfc1;
  --theme-link: #6e4f33;

  /* Accent and status */
  --theme-accent: #b27a45;
  --theme-accent-strong: #c89158;
  --theme-accent-subtle: rgba(200, 145, 88, 0.24);
  --theme-focus: #c9a227;
  --theme-success: #2f6a42;
  --theme-danger: #8b3a28;
  --theme-warning: #a6493e;

  /* Structure */
  --theme-border: #a2815f;
  --theme-border-strong: #6b4c1e;
  --theme-radius-sm: 4px;
  --theme-radius-md: 7px;
  --theme-radius-lg: 10px;
  --theme-shadow-soft: 0 10px 24px rgba(28, 18, 10, 0.18);
  --theme-density-y: 6px;
  --theme-density-x: 12px;
  --theme-skin-border-glow: 0 0 0 0 transparent;
  --theme-skin-surface-overlay: transparent;
  --theme-visual-overlay: transparent;
  --theme-visual-page-overlay: transparent;
  --theme-visual-accent: var(--theme-game-accent);
  --theme-visual-border: var(--theme-game-border);
  --theme-visual-shadow-glow: 0 0 0 0 transparent;

  /* Navigation and shell */
  --theme-nav-bg: #2a1f17;
  --theme-nav-bg-2: #3a2a21;
  --theme-nav-text: #f3dfc1;
  --theme-nav-muted: #d1b691;
  --theme-nav-border: #6f5238;

  /* Gameplay surfaces */
  --theme-game-bg: #4b392b;
  --theme-game-bg-top: #5a4635;
  --theme-game-panel: #d9c2a0;
  --theme-game-panel-2: #cbb08c;
  --theme-game-text: #332316;
  --theme-game-muted: #6b4f36;
  --theme-game-border: #9c805f;
  --theme-game-accent: #9b6b3f;
  --theme-game-accent-2: #b07a4a;
  --theme-game-success: #7aa36b;
}

html[data-theme="light"] {
  --theme-bg-page: #efe2c9;
  --theme-bg-page-top: #f7edd9;
  --theme-bg-app: #efe1c7;
  --theme-bg-app-top: #f6ebd6;
  --theme-surface: #f4e6ce;
  --theme-surface-2: #ead8ba;
  --theme-surface-muted: #f3e2c3;
  --theme-surface-muted-2: #e6d0aa;

  --theme-text: #253b5f;
  --theme-text-strong: #243a5d;
  --theme-text-muted: #5d708e;
  --theme-text-inverse: #e6eefb;
  --theme-link: #243a5d;

  --theme-accent: #2f6eb7;
  --theme-accent-strong: #5f86bf;
  --theme-accent-subtle: rgba(47, 110, 183, 0.2);
  --theme-focus: #1d5fad;
  --theme-success: #2e7a59;
  --theme-danger: #b5534f;
  --theme-warning: #b5534f;

  --theme-border: #b2c3db;
  --theme-border-strong: #4a7ab8;
  --theme-shadow-soft: 0 10px 24px rgba(25, 42, 74, 0.12);

  --theme-nav-bg: #10203a;
  --theme-nav-bg-2: #152b4b;
  --theme-nav-text: #e6eefb;
  --theme-nav-muted: #b7c8e4;
  --theme-nav-border: #4f6c95;

  --theme-game-bg: #efe1c7;
  --theme-game-bg-top: #f6ebd6;
  --theme-game-panel: #f3e2c3;
  --theme-game-panel-2: #e6d0aa;
  --theme-game-text: #243a5d;
  --theme-game-muted: #5d708e;
  --theme-game-border: #b2c3db;
  --theme-game-accent: #2f6eb7;
  --theme-game-accent-2: #5f86bf;
  --theme-game-success: #2e7a59;
}

:root[data-theme-skin-radius="sharp"] {
  --theme-radius-sm: 2px;
  --theme-radius-md: 3px;
  --theme-radius-lg: 5px;
}

:root[data-theme-skin-radius="soft"] {
  --theme-radius-sm: 4px;
  --theme-radius-md: 7px;
  --theme-radius-lg: 10px;
}

:root[data-theme-skin-radius="rounded"] {
  --theme-radius-sm: 8px;
  --theme-radius-md: 12px;
  --theme-radius-lg: 16px;
}

:root[data-theme-skin-shadow="none"] {
  --theme-shadow-soft: none;
}

:root[data-theme-skin-shadow="subtle"] {
  --theme-shadow-soft: 0 10px 24px rgba(28, 18, 10, 0.18);
}

:root[data-theme-skin-shadow="medium"] {
  --theme-shadow-soft: 0 14px 34px rgba(28, 18, 10, 0.28);
}

:root[data-theme-skin-density="compact"] {
  --theme-density-y: 4px;
  --theme-density-x: 9px;
}

:root[data-theme-skin-density="comfortable"] {
  --theme-density-y: 6px;
  --theme-density-x: 12px;
}

:root[data-theme-skin-density="spacious"] {
  --theme-density-y: 8px;
  --theme-density-x: 14px;
}

:root[data-theme-skin-border-style="plain"] {
  --theme-skin-border-glow: 0 0 0 0 transparent;
}

:root[data-theme-skin-border-style="etched"] {
  --theme-skin-border-glow: inset 0 1px 0 color-mix(in oklab, var(--theme-game-text), transparent 82%);
}

:root[data-theme-skin-border-style="glow"] {
  --theme-skin-border-glow: 0 0 0 1px color-mix(in oklab, var(--theme-game-accent), transparent 52%);
}

:root[data-theme-skin-surface-depth="flat"] {
  --theme-skin-surface-overlay: transparent;
}

:root[data-theme-skin-surface-depth="layered"] {
  --theme-skin-surface-overlay: color-mix(in oklab, var(--theme-game-panel-2), transparent 68%);
}

:root[data-theme-visual-mode="classic"] {
  --theme-visual-overlay: transparent;
  --theme-visual-page-overlay: transparent;
  --theme-visual-accent: var(--theme-game-accent);
  --theme-visual-border: var(--theme-game-border);
  --theme-visual-shadow-glow: 0 0 0 0 transparent;
}

:root[data-theme-visual-mode="arcane"] {
  --theme-visual-overlay: color-mix(in oklab, #6d5dfc, transparent 58%);
  --theme-visual-page-overlay: color-mix(in oklab, #312e81, transparent 78%);
  --theme-visual-accent: color-mix(in oklab, var(--theme-game-accent), #8b5cf6 48%);
  --theme-visual-border: color-mix(in oklab, var(--theme-game-border), #8b5cf6 34%);
  --theme-visual-shadow-glow: 0 0 34px color-mix(in oklab, #8b5cf6, transparent 64%);
}

:root[data-theme-visual-mode="grimdark"] {
  --theme-visual-overlay: color-mix(in oklab, #070605, transparent 54%);
  --theme-visual-page-overlay: color-mix(in oklab, #000000, transparent 66%);
  --theme-visual-accent: color-mix(in oklab, var(--theme-game-accent), #6b1f1a 48%);
  --theme-visual-border: color-mix(in oklab, var(--theme-game-border), #1a1512 44%);
  --theme-visual-shadow-glow: 0 0 18px color-mix(in oklab, #000000, transparent 62%);
}

:root[data-theme-visual-mode="parchment"] {
  --theme-visual-overlay: color-mix(in oklab, #f2d49a, transparent 58%);
  --theme-visual-page-overlay: color-mix(in oklab, #8a5b2f, transparent 78%);
  --theme-visual-accent: color-mix(in oklab, var(--theme-game-accent), #b7792b 44%);
  --theme-visual-border: color-mix(in oklab, var(--theme-game-border), #b7792b 30%);
  --theme-visual-shadow-glow: 0 0 22px color-mix(in oklab, #b7792b, transparent 74%);
}

:root[data-theme-visual-mode="crystal"] {
  --theme-visual-overlay: color-mix(in oklab, #7dd3fc, transparent 54%);
  --theme-visual-page-overlay: color-mix(in oklab, #0e7490, transparent 78%);
  --theme-visual-accent: color-mix(in oklab, var(--theme-game-accent), #67e8f9 52%);
  --theme-visual-border: color-mix(in oklab, var(--theme-game-border), #67e8f9 38%);
  --theme-visual-shadow-glow: 0 0 30px color-mix(in oklab, #67e8f9, transparent 66%);
}

:root[data-theme-visual-mode="infernal"] {
  --theme-visual-overlay: color-mix(in oklab, #7f1d1d, transparent 56%);
  --theme-visual-page-overlay: color-mix(in oklab, #450a0a, transparent 72%);
  --theme-visual-accent: color-mix(in oklab, var(--theme-game-accent), #f97316 52%);
  --theme-visual-border: color-mix(in oklab, var(--theme-game-border), #f97316 38%);
  --theme-visual-shadow-glow: 0 0 34px color-mix(in oklab, #f97316, transparent 62%);
}

#theme-toggle-btn {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 1400;
  padding: 6px 12px;
  border-radius: var(--theme-radius-sm);
  border: 1px solid var(--theme-border-strong);
  background: var(--theme-nav-bg-2);
  color: var(--theme-nav-muted);
  font-family: Georgia, serif;
  font-size: 12px;
  cursor: pointer;
}

#theme-toggle-btn[aria-expanded="true"] {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--theme-focus), transparent 65%);
}

#theme-toggle-btn:hover {
  background: color-mix(in oklab, var(--theme-nav-bg-2), var(--theme-accent) 18%);
  color: var(--theme-focus);
}

#theme-toggle-btn:focus-visible {
  outline: 2px solid var(--theme-focus);
  outline-offset: 1px;
}

html[data-theme="light"] #theme-toggle-btn {
  background: var(--theme-focus);
  color: #f0f8ff;
  border-color: var(--theme-border-strong);
}

html[data-theme="light"] #theme-toggle-btn:hover {
  background: color-mix(in oklab, var(--theme-focus), #000 10%);
}

#theme-toggle-menu {
  position: fixed;
  right: 10px;
  bottom: 48px;
  z-index: 1410;
  min-width: 132px;
  padding: 4px;
  border-radius: var(--theme-radius-md);
  border: 1px solid var(--theme-border-strong);
  background: var(--theme-nav-bg);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

#theme-toggle-menu[hidden] {
  display: none;
}

.theme-toggle-option {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--theme-radius-sm);
  background: transparent;
  color: var(--theme-nav-muted);
  font-family: Georgia, serif;
  font-size: 12px;
  padding: 7px 8px;
  cursor: pointer;
}

.theme-toggle-option:hover {
  background: color-mix(in oklab, var(--theme-nav-bg), var(--theme-accent) 12%);
  color: var(--theme-nav-text);
}

.theme-toggle-option[aria-checked="true"] {
  border-color: var(--theme-focus);
  background: var(--theme-nav-bg-2);
  color: #ffe090;
}

.theme-toggle-option:focus-visible {
  outline: 2px solid var(--theme-focus);
  outline-offset: 1px;
}

html[data-theme="light"] body.theme-generic {
  background: #f0f4f8 !important;
  color: var(--theme-text, #111827) !important;
}

html[data-theme="light"] body.theme-generic .panel,
html[data-theme="light"] body.theme-generic .card,
html[data-theme="light"] body.theme-generic .frame::before,
html[data-theme="light"] body.theme-generic .admin-nav,
html[data-theme="light"] body.theme-generic .wiz-wrap {
  background: #ffffff !important;
  border-color: var(--theme-border, #c8d4e4) !important;
  color: var(--theme-text, #111827) !important;
}

html[data-theme="light"] body.theme-generic input,
html[data-theme="light"] body.theme-generic select,
html[data-theme="light"] body.theme-generic textarea {
  background: #ffffff !important;
  color: var(--theme-text, #111827) !important;
  border-color: #bfcfdf !important;
}

html[data-theme="light"] body.theme-generic .btn,
html[data-theme="light"] body.theme-generic button,
html[data-theme="light"] body.theme-generic .back,
html[data-theme="light"] body.theme-generic .openbtn,
html[data-theme="light"] body.theme-generic .savebtn,
html[data-theme="light"] body.theme-generic .linkbtn {
  background: var(--theme-focus, #1d5fad) !important;
  color: #f0f8ff !important;
  border-color: var(--theme-border-strong, #4a7ab8) !important;
}

/* Preserve wizard option-card visual states in light theme. */
html[data-theme="light"] body.theme-generic .length-card,
html[data-theme="light"] body.theme-generic .hook-card,
html[data-theme="light"] body.theme-generic .tone-tag {
  background: #ffffff !important;
  color: var(--theme-text, #111827) !important;
  border-color: var(--theme-border, #c8d4e4) !important;
}

html[data-theme="light"] body.theme-generic .length-card.selected,
html[data-theme="light"] body.theme-generic .length-card[aria-pressed="true"],
html[data-theme="light"] body.theme-generic .hook-card.selected,
html[data-theme="light"] body.theme-generic .hook-card[aria-pressed="true"],
html[data-theme="light"] body.theme-generic .tone-tag.selected,
html[data-theme="light"] body.theme-generic .tone-tag[aria-pressed="true"] {
  background: #d0ddf0 !important;
  color: #0d233d !important;
  border-color: var(--theme-focus, #1d5fad) !important;
  box-shadow: 0 0 0 1px rgba(29,95,173,.30), 0 0 10px rgba(29,95,173,.15) !important;
}

html[data-theme="light"] body.theme-generic .length-card.selected .lc-title,
html[data-theme="light"] body.theme-generic .length-card[aria-pressed="true"] .lc-title,
html[data-theme="light"] body.theme-generic .hook-card.selected .hc-title,
html[data-theme="light"] body.theme-generic .hook-card[aria-pressed="true"] .hc-title {
  color: #0d233d !important;
}

html[data-theme="light"] body.theme-generic .btn:hover,
html[data-theme="light"] body.theme-generic button:hover,
html[data-theme="light"] body.theme-generic .back:hover,
html[data-theme="light"] body.theme-generic .openbtn:hover,
html[data-theme="light"] body.theme-generic .savebtn:hover,
html[data-theme="light"] body.theme-generic .linkbtn:hover {
  background: color-mix(in oklab, var(--theme-focus, #1d5fad), #000 10%) !important;
}

body.theme-generic button:focus-visible,
body.theme-generic a:focus-visible,
body.theme-generic input:focus-visible,
body.theme-generic select:focus-visible,
body.theme-generic textarea:focus-visible {
  outline: 2px solid var(--theme-focus, #c9a227);
  outline-offset: 1px;
}

html[data-theme="light"] body.theme-generic .muted,
html[data-theme="light"] body.theme-generic .hint,
html[data-theme="light"] body.theme-generic p.sub,
html[data-theme="light"] body.theme-generic label,
html[data-theme="light"] body.theme-generic th,
html[data-theme="light"] body.theme-generic .crumb {
  color: var(--theme-text-muted, #374151) !important;
}

@media (max-width: 900px) {
  #theme-toggle-btn {
    right: 8px;
    bottom: 8px;
  }

  #theme-toggle-menu {
    right: 8px;
    bottom: 46px;
  }
}