/* Optional dark palettes. The established green palette keeps its existing styles. */
html[data-theme="dark"][data-palette="blue"] {
  --bg: #0b1423;
  --ink: #e5efff;
  --muted: #a6b9d4;
  --green: #8bbaff;
  --line: #344d70;
  --lime: #233e65;
  --surface: #142238;
  --field-bg: #0e1b2e;
  --soft: #1b2e49;
  --palette-hover: #243d5d;
  --palette-hover-line: #83a8d8;
  --palette-accent-hover: #b1d2ff;
  --palette-on-accent: #07182f;
  --palette-focus: #a4caff;
  --palette-strong-line: #698bb8;
  --palette-summary: #203c60;
  --palette-badge: #2c4874;
  --palette-glow: #4480d233;
  --palette-die: #263e62;
  --palette-link: #bad6ff;
  --palette-notice: #d5e7ff;
  --palette-notice-ink: #10223b;
}
html[data-theme="dark"][data-palette="red"] {
  --bg: #1b1115;
  --ink: #ffedf0;
  --muted: #d4b3bd;
  --green: #f2a0ae;
  --line: #66434e;
  --lime: #57313e;
  --surface: #2a1b23;
  --field-bg: #21151b;
  --soft: #3b252e;
  --palette-hover: #4b2e39;
  --palette-hover-line: #c18b9b;
  --palette-accent-hover: #ffc2cc;
  --palette-on-accent: #38121c;
  --palette-focus: #ffc1cc;
  --palette-strong-line: #b77c8c;
  --palette-summary: #4a2936;
  --palette-badge: #633646;
  --palette-glow: #b8547033;
  --palette-die: #57313f;
  --palette-link: #ffbdcb;
  --palette-notice: #ffe0e6;
  --palette-notice-ink: #381824;
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) {
  color-scheme: dark;
  --accent: var(--green);
  --button-text: var(--palette-on-accent);
  --surface-soft: var(--soft);
  --palette-warning: #f3c58f;
  --palette-warning-bg: #3d2b20;
  --palette-warning-line: #c2925a;
  --palette-error: #ffc2ac;
  --palette-error-bg: #442825;
  --palette-error-line: #d7997d;
  accent-color: var(--green);
  scrollbar-color: var(--palette-strong-line) var(--bg);
}
/* Native surfaces, including the header and every dialog assembled at runtime. */
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) body {
  background: var(--bg);
  color: var(--ink);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) header {
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(.slot,.panel,dialog,button,select) {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(input,textarea,.slot select) {
  background: var(--field-bg);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(input,textarea)::placeholder {
  color: var(--muted);
  opacity: .85;
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(select option,select optgroup) {
  background: var(--field-bg);
  color: var(--ink);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(button,select):hover:not(:disabled) {
  background: var(--palette-hover);
  border-color: var(--palette-hover-line);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(button,select,input,textarea):disabled {
  color: var(--muted);
  opacity: .65;
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) #unlock-shop option:disabled {
  color: var(--muted);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :focus-visible {
  outline-color: var(--palette-focus);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) ::selection {
  background: var(--green);
  color: var(--palette-on-accent);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) a {
  color: var(--palette-link);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(.brand,.hero em,.field,.score-eligible,.starter-grid b) {
  color: var(--green);
}
/* Active selections keep dark text against the pale palette accent. */
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(.primary,.run-tabs .selected,.workspace-tabs .selected,.route-track .clear,.builder-basics button[aria-pressed="true"],#guide-return) {
  background: var(--green);
  color: var(--palette-on-accent);
  border-color: var(--green);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(.primary,.run-tabs .selected,.workspace-tabs .selected,.builder-basics button[aria-pressed="true"],#guide-return):hover:not(:disabled) {
  background: var(--palette-accent-hover);
  color: var(--palette-on-accent);
  border-color: var(--palette-accent-hover);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(.toolbar,.meter,#validation,.summary-chips span,.summary-check,.resource-grid>div,.modifier-catalog label,.modifier-info,.mode-detail,.wiki-table th,.dungeon-objective,.next-step,.encounter-state,.event-preview,.scar-life-preview,.scar-result) {
  background: var(--soft);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(.modifier-info,.next-step,.objective-state) {
  border-left-color: var(--green);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) .meter i {
  background: var(--green);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(.run-summary,.builder-start) {
  background: linear-gradient(135deg,var(--palette-summary),var(--surface) 70%);
  border-color: var(--palette-strong-line);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) .summary-badge {
  background: var(--palette-badge);
  color: var(--ink);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) .summary-badge small {
  color: var(--ink);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) .orbit {
  border-color: var(--palette-strong-line);
  outline-color: var(--line);
  background: radial-gradient(circle,var(--palette-summary),transparent 70%);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) .slotnum {
  color: var(--muted);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) .lock.on {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--palette-strong-line);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) .starter-grid button {
  background: var(--surface);
  border-color: var(--line);
  border-top-color: var(--green);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) .starter-grid button:hover {
  background: var(--palette-hover);
  box-shadow: 0 8px 22px var(--palette-glow);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) .challenge-catalog button {
  background: var(--field-bg);
}
/* Menu, wiki navigation, chips and the two kinds of switches. */
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) .edition-menu #edition-drawer {
  background: var(--surface);
  box-shadow: 0 20px 60px #0009;
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) .edition-menu #edition-drawer :is(.drawer-links [data-current],.drawer-editions [aria-pressed="true"]) {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--green);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) .edition-menu #edition-drawer .drawer-section-body>button[aria-pressed] {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) .edition-menu #edition-drawer .drawer-section-body>button[aria-pressed]:hover {
  background: var(--palette-hover);
  border-color: var(--line);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) .drawer-section-body>button[aria-pressed="true"]::before {
  background: var(--green);
  border-color: var(--green);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) .drawer-section-body>button[aria-pressed="true"]::after {
  background: var(--palette-on-accent);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) #manual-scars-toggle {
  background: var(--line);
  border-color: var(--palette-strong-line);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) #manual-scars-toggle:checked {
  background: var(--green);
  border-color: var(--green);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) #manual-scars-toggle::before {
  background: var(--ink);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) #manual-scars-toggle:checked::before {
  background: var(--palette-on-accent);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(.term,#wiki-nav button,.next-step-actions .guide-secondary,.supporting-rules>.panel,#customize-build) {
  background: transparent;
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(.term:hover,.term:focus,#wiki-nav button:hover) {
  background: var(--palette-hover);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) #wiki-nav button[aria-current] {
  background: var(--lime);
  color: var(--ink);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) #wiki-article a {
  color: var(--palette-link);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) .scar-result-options label:has(input:checked) {
  background: var(--lime);
  border-color: var(--green);
}
/* Warnings retain a warm semantic color distinct from the selected palette. */
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(.restriction-list>div,.pending-effects) {
  background: var(--palette-warning-bg);
  border-color: var(--palette-warning-line);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) .restriction-tag {
  color: var(--palette-warning);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(.hardcore-panel,.hardcore-builder #hardcore-toggle) {
  border-color: var(--palette-warning-line);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(.hardcore-notice,.mission-clock-rule,.score-honors) {
  border-left-color: var(--palette-warning-line);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(.build-error,.route-track .failed) {
  background: var(--palette-error-bg);
  color: var(--palette-error);
  border-color: var(--palette-error-line);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(#manual-scar-error,.event-form-error) {
  color: var(--palette-error);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(#launch-errors,.objective-missed) {
  border-left-color: var(--palette-error-line);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) #launch-preparation [aria-invalid="true"] {
  border-color: var(--palette-error-line);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) :is(#tooltip,#toast) {
  background: var(--palette-notice);
  color: var(--palette-notice-ink);
  box-shadow: 0 12px 40px #0007;
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) #toast.clear-moment {
  border-color: var(--palette-warning-line);
  box-shadow: 0 8px 35px var(--palette-glow);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) dialog::backdrop {
  background: #03050bd1;
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) .dice-cue {
  color: var(--green);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) .physical-die path {
  fill: var(--palette-die);
  stroke: var(--green);
}
html[data-theme="dark"]:is([data-palette="blue"],[data-palette="red"]) .physical-die text {
  fill: var(--ink);
}
/* New preference control uses the current palette as its color sample. */
.palette-setting[hidden], #palette-help[hidden] { display: none; }
.palette-setting {
  display: block;
  margin: 10px 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
#theme-palette {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 7px;
  border-inline-start: 4px solid var(--green);
}
#palette-help {
  display: block;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.55;
}