/*
 * The neutral colours of the brand's website, the same for every brand, in
 * light and dark mode, and the switch between auto, light and dark mode. The
 * mode follows the `data-theme` attribute on <html>, which theme.js sets, or
 * in the Django admin the admin's own script: it picks the `color-scheme`,
 * which picks each colour of a light-dark() pair.
 *
 * The same file is in django-cp (base/static/base/) for the browsable API and
 * the admin's login page, and in django-cp-web (src/assets/theme/) for the
 * control panel. Keep the copies the same.
 */

:root {
  --bg: light-dark(#fff, #0a1a14);
  --text: light-dark(#1f2937, #e5e7eb);
  --muted: light-dark(#6b7280, #9ca3af);
  --border: light-dark(#e5e7eb, #1f3d2f);
  --surface: light-dark(#f9fafb, #0d2a1f);
  --raised: light-dark(#fff, #1a2a22);
  --code-bg: light-dark(#0a1a14, #06120d);
  --code-text: #e5e7eb;
  --code-muted: #9ca3af;
  --error: light-dark(#dc2626, #f87171);
  --radius: 8px;
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
}

/* The admin's own switch also offers "auto": the system decides */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;
  }
}

/* The switch between auto, light and dark mode shows the current one */

.theme-toggle {
  padding: 7px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  line-height: 0;
  cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus {
  background: var(--surface);
  color: var(--link);
}

.theme-toggle .icon-auto,
.theme-toggle .icon-sun,
.theme-toggle .icon-moon,
.theme-toggle .theme-label-auto,
.theme-toggle .theme-label-light,
.theme-toggle .theme-label-dark {
  display: none;
}

[data-theme="auto"] .theme-toggle .icon-auto,
[data-theme="light"] .theme-toggle .icon-sun,
[data-theme="dark"] .theme-toggle .icon-moon {
  display: inline;
}

[data-theme="auto"] .theme-toggle .theme-label-auto,
[data-theme="light"] .theme-toggle .theme-label-light,
[data-theme="dark"] .theme-toggle .theme-label-dark {
  display: block;
}