/* AUTX theme tokens — light default, system dark, manual override */
:root {
  --bg-color: #f8fafc;
  --card-bg: #ffffff;
  --text-color: #0f172a;
  --autx-theme-muted: #64748b;
  --autx-theme-line: #e2e8f0;
  --autx-theme-accent: #0088b0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-autx-theme="light"]) {
    --bg-color: #0b1220;
    --card-bg: #111827;
    --text-color: #f1f5f9;
    --autx-theme-muted: #94a3b8;
    --autx-theme-line: #1f2937;
    --autx-theme-accent: #22b8cf;
  }
}

html[data-autx-theme="dark"] {
  --bg-color: #0b1220;
  --card-bg: #111827;
  --text-color: #f1f5f9;
  --autx-theme-muted: #94a3b8;
  --autx-theme-line: #1f2937;
  --autx-theme-accent: #22b8cf;
}

html[data-autx-theme="light"] {
  --bg-color: #f8fafc;
  --card-bg: #ffffff;
  --text-color: #0f172a;
  --autx-theme-muted: #64748b;
  --autx-theme-line: #e2e8f0;
  --autx-theme-accent: #0088b0;
}

.autx-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--autx-sw-border, rgba(255, 255, 255, 0.18));
  background: var(--autx-sw-chip, rgba(255, 255, 255, 0.12));
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.autx-theme-toggle:hover,
.autx-theme-toggle:focus-visible {
  background: var(--autx-sw-chip-hover, rgba(255, 255, 255, 0.2));
  outline: none;
}

.autx-theme-toggle__icon {
  display: none;
  width: 1.05rem;
  height: 1.05rem;
}

/* Active theme = dark → show sun (switch to light). Else show moon. */
html[data-autx-theme="dark"] .autx-theme-toggle__icon--sun {
  display: block;
}

html[data-autx-theme="light"] .autx-theme-toggle__icon--moon,
html:not([data-autx-theme]) .autx-theme-toggle__icon--moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  html:not([data-autx-theme]) .autx-theme-toggle__icon--moon {
    display: none;
  }
  html:not([data-autx-theme]) .autx-theme-toggle__icon--sun {
    display: block;
  }
}
