/* BAND-002348 (UI-06): the System / Light / Dark switch (js/theme.js renders it into the account
   menu and into Settings). Colours come from tokens, so the switch follows the theme it selects.
   The account menu's rows are styled with the menu (css/app-shell.css); this is the segmented
   switch of Settings. The theme in use takes the brand's selected fill, the accent and a heavier
   weight, never the fill alone (brand D-11). */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  padding: var(--space-0-5);
  border: 1px solid var(--color-divider-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.theme-switch .theme-option:enabled {
  min-height: 28px;
  min-width: 28px;
  padding: var(--space-1);
  gap: var(--space-1-5);
  border-color: transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}
.theme-switch .theme-option:enabled:hover {
  background: var(--color-surface-3);
  color: var(--color-text);
}
.theme-switch .theme-option[aria-pressed="true"]:enabled {
  border-color: var(--color-accent);
  background: var(--color-selected);
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}
.theme-switch svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.theme-switch-labelled .theme-option:enabled { padding: var(--space-1-5) var(--space-3); }
.theme-settings .theme-switch { margin-top: var(--space-1); }
.theme-settings > p { margin: var(--space-2) 0 var(--space-3); }
@media (width < 600px) {
  .theme-switch-labelled { display: flex; flex-wrap: wrap; }
}