/* Nonlegacy palette component colors. Applies automatically to future catalog IDs.
   Preserve original themes and all component geometry; no CSS @scope dependency. */
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) .logo-mark-circle {
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--logo-grad-a), var(--logo-grad-b));
}
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) .btn.osi-layer-btn.active {
  background: var(--selected-bg);
  color: var(--selected-text);
  border-color: var(--accent);
}
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) body :focus-visible { outline-color: var(--focus-ring); }
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) .vox-range-track input:focus-visible::-webkit-slider-thumb { outline-color: var(--focus-ring); }

/* Shared text-bearing branding uses the same readable accent pair. */
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) .combiner-brand__mark { color: var(--on-accent); }
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) :is(.territory-map-block, .territory-map-shell) { background: var(--surface); }

:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) :is(.vox-icon-button, .vox-compact-button, .vox-tool-action, .combiner-icon-button, .combiner-small-button, .combiner-tool-action):hover:not(:disabled) {
  background: var(--hover-bg);
  color: var(--text-main);
}
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) :is(.vox-icon-button, .vox-compact-button, .vox-tool-action, .combiner-icon-button, .combiner-small-button, .combiner-tool-action).is-primary {
  background: var(--accent);
  color: var(--on-accent);
}
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) :is(.vox-icon-button, .vox-compact-button, .vox-tool-action, .combiner-icon-button, .combiner-small-button, .combiner-tool-action).is-primary:hover:not(:disabled) {
  background: var(--accent-alt);
  color: var(--on-accent);
}
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) :is(.vox-icon-button, .vox-compact-button, .combiner-icon-button, .combiner-small-button)[aria-pressed="true"]:not(:disabled) {
  background: var(--selected-bg);
  color: var(--selected-text);
}

/* Native date/select widgets must inherit the catalog's light/dark scheme. */
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) .tt-app { color-scheme: inherit; }

/* A white gloss made pale text unreadable on dark seasonal fields. */
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) .tool-modern-card .tool-input-row :is(input, select),
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) .tool-modern-card .tool-textarea {
  background: var(--field-bg);
  color: var(--text-main);
  border-color: var(--field-border);
}

/* Disabled is a palette pair, not reduced opacity over an arbitrary parent. */
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) body :is(.btn, button, input, select, textarea):is(:disabled, [aria-disabled="true"]) {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  border-color: var(--disabled-border);
  opacity: 1;
}
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) body :is(input, textarea)::placeholder,
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) .tt-app :is(input, textarea)::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) .tools-workspace .tools-sidebar :is(a, button):hover,
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) .tools-workspace .tools-sidebar-toggle:hover {
  background: var(--hover-bg);
  color: var(--text-main);
}
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) .tools-workspace .tools-sidebar :is(a, button)[aria-current],
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) .tools-workspace .tools-sidebar .tools-sidebar-action[aria-pressed="true"] {
  background: var(--selected-bg);
  color: var(--selected-text);
}
/* Only the ring color changes; each component retains its outline geometry. */
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) .tt-app :focus-visible,
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) .tools-workspace .tools-sidebar :focus-visible,
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) .tools-workspace .tools-sidebar-toggle:focus-visible,
:root:where([data-theme]):not(:where([data-theme="light"], [data-theme="cyber"], [data-theme="blackout"])) .tools-search-wrap input:focus {
  outline-color: var(--focus-ring);
}