/* Continuum shared native control theming.
   Keeps native accessibility while making browser-owned controls readable in both themes. */
html[data-theme="light"] {
  --continuum-native-control-bg: #ffffff;
  --continuum-native-control-text: #17212b;
  --continuum-native-control-muted: #687887;
  --continuum-native-control-selected: #dbeafe;
  --continuum-native-control-selected-text: #123a68;
  --continuum-control-focus: #2f7df4;
  color-scheme: light;
}

html[data-theme="dark"] {
  --continuum-native-control-bg: #111820;
  --continuum-native-control-text: #eef4fb;
  --continuum-native-control-muted: #8d9aa8;
  --continuum-native-control-selected: #1b4d79;
  --continuum-native-control-selected-text: #ffffff;
  --continuum-control-focus: #72adff;
  color-scheme: dark;
}

html[data-theme] :where(input, textarea, select) {
  color-scheme: inherit;
}

html[data-theme] :where(select) option {
  background-color: var(--continuum-native-control-bg);
  color: var(--continuum-native-control-text);
}

html[data-theme] :where(select) option:checked {
  background-color: var(--continuum-native-control-selected);
  color: var(--continuum-native-control-selected-text);
}

html[data-theme] :where(select) option:disabled {
  color: var(--continuum-native-control-muted);
}

html[data-theme] :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus-visible {
  outline: 2px solid var(--continuum-control-focus);
  outline-offset: 2px;
}

html[data-theme] :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--blue, var(--accent, var(--continuum-control-focus)));
}