/* Palette copied from APH lib/user-theme.ts. */
:root {
  color-scheme: light;
  --color-ink: 29 29 27;
  --color-muted: 100 116 139;
  --color-paper: 247 247 245;
  --color-line: 224 226 226;
  --color-forest: 0 87 143;
  --color-moss: 0 62 102;
  --color-mint: 232 241 247;
  --color-surface: 255 255 255;
  --ink: rgb(var(--color-ink));
  --muted: rgb(var(--color-muted));
  --paper: rgb(var(--color-paper));
  --surface: rgb(var(--color-surface));
  --line: rgb(var(--color-line));
  --blue: rgb(var(--color-forest));
  --blue-dark: rgb(var(--color-moss));
  --blue-light: rgb(var(--color-mint));
  --on-accent: #fff;
  --yellow: #f7c800;
  --red: #b42f30;
  --red-light: #fff0ef;
  --green: #286440;
  --green-light: #edf6ef;
  --warning: #785900;
  --warning-light: #fff8df;
  background: var(--paper);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-ink: 238 241 245;
  --color-muted: 166 176 190;
  --color-paper: 29 33 38;
  --color-line: 70 78 90;
  --color-forest: 82 185 232;
  --color-moss: 139 214 248;
  --color-mint: 25 54 70;
  --color-surface: 38 43 50;
  --on-accent: #1d2126;
  --red: #ffaaa7;
  --red-light: #47292b;
  --green: #91d1a4;
  --green-light: #243d2e;
  --warning: #f1d477;
  --warning-light: #433b24;
}

/* Compact version of the two-position APH switch. */
.theme-mode-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  width: 72px;
  min-width: 72px;
  height: 30px;
  align-items: center;
  padding: 0;
  border: 1px solid rgb(var(--color-ink));
  border-radius: 999px !important;
  background: rgb(var(--color-surface));
  color: rgb(var(--color-ink));
  font-family: inherit;
  box-shadow: none;
  cursor: pointer;
  flex-shrink: 0;
}

.theme-mode-switch::before {
  content: "";
  position: absolute;
  inset: 3px auto 3px 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: rgb(var(--color-ink));
  transition: transform 180ms ease;
}

.theme-mode-switch[data-mode="dark"]::before {
  transform: translateX(100%);
}

.theme-mode-switch::after {
  content: "";
  position: absolute;
  inset: -7px 0;
}

.theme-mode-switch span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 180ms ease;
}

.theme-mode-switch svg {
  width: 16px;
  height: 16px;
}

.theme-mode-switch[data-mode="light"] span:first-child,
.theme-mode-switch[data-mode="dark"] span:last-child {
  color: rgb(var(--color-surface));
}

:root[data-theme="dark"] .theme-mode-switch[data-mode="light"] span:first-child,
:root[data-theme="dark"] .theme-mode-switch[data-mode="dark"] span:last-child {
  color: rgb(var(--color-paper));
}

.brand-logo-negative {
  display: none;
}

:root[data-theme="dark"] .brand-logo-positive {
  display: none;
}

:root[data-theme="dark"] .brand-logo-negative {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .theme-mode-switch::before,
  .theme-mode-switch span {
    transition: none;
  }
}