:root {
  --control-bg: #ffffff;
  --button-text-on-accent: #ffffff;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101418;
  --panel: #171d23;
  --text: #edf3f7;
  --muted: #aab7c4;
  --line: #2d3944;
  --accent: #4fb3c8;
  --accent-strong: #79d3e3;
  --danger: #ff8a80;
  --success-bg: #11261c;
  --success-text: #8ee4b4;
  --warning-bg: #2c2412;
  --warning-text: #ffd27a;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
  --control-bg: #101820;
  --button-text-on-accent: #061116;
}

:root[data-theme="dark"] button.primary,
:root[data-theme="dark"] .login-button {
  color: var(--button-text-on-accent);
}

:root[data-theme="dark"] button,
:root[data-theme="dark"] .file-button,
:root[data-theme="dark"] .secondary-link,
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--control-bg);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: #788896;
}

:root[data-theme="dark"] .sync-status.error {
  background: #321719;
  border-color: rgba(255, 138, 128, 0.24);
}

:root[data-theme="dark"] .read-only-label {
  background: #23303a;
}

:root[data-theme="dark"] .low-stock {
  background: var(--warning-bg);
  color: var(--warning-text);
}

:root[data-theme="dark"] .selected-row {
  background: rgba(79, 179, 200, 0.16);
}

.theme-toggle {
  min-width: 7.5rem;
}

.login-theme-action {
  justify-self: end;
  margin-bottom: 1rem;
}

@media (max-width: 640px) {
  .theme-toggle {
    width: 100%;
  }

  .login-theme-action {
    justify-self: stretch;
  }
}