:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  color: #26352d;
  background: #f7f3e8;
  --page-bg: #f7f3e8;
  --surface: #fffdf7;
  --surface-raised: #f1ebdd;
  --field-bg: #fff;
  --border: #e6ddc8;
  --text: #26352d;
  --muted: #68756c;
  --accent: #287653;
  --accent-strong: #1f5e41;
  --mango: #e9a23b;
  --danger: #a32929;
}

body {
  color: var(--text);
  background: var(--page-bg);
}

main {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: 0 1rem 3rem #26352d12;
}

h1,
h2,
h3 {
  color: var(--accent);
}

a {
  color: var(--accent);
}

body .topbar a,
body .store-actions a {
  color: var(--accent);
}

a:hover {
  color: var(--accent-strong);
}

button:not(.secondary):not(.danger),
.button {
  color: #fff;
  background: var(--accent);
}

button:not(.secondary):not(.danger):hover:not(:disabled),
.button:hover {
  color: #fff;
  background: var(--accent-strong);
}

button:not(.secondary):not(.danger):disabled {
  color: #68756c;
  background: #e6ddc8;
  cursor: not-allowed;
}

input,
select,
textarea {
  color: var(--text);
  background: var(--field-bg);
  border-color: var(--border);
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button.secondary {
  color: var(--text);
  background: var(--surface-raised);
}

fieldset,
.store-card {
  border-color: var(--border);
}

code {
  color: var(--text);
  background: var(--surface-raised);
}

th,
td {
  border-color: var(--border);
}

th,
td small {
  color: var(--muted);
}

.message,
#status.error {
  color: var(--danger);
}

.field-help,
.blacklist-event-meta {
  color: var(--muted);
}

.store-access-control,
.store-toggle {
  color: var(--text);
}

.store-status {
  color: var(--accent);
  background: #e7f0e8;
}

.store-status.blacklisted {
  color: var(--danger);
  background: #f9eae6;
}

.store-toggle-state {
  color: var(--danger);
}

.store-toggle-input:checked ~ .store-toggle-state {
  color: var(--accent);
}

.blacklist-dialog {
  border-color: var(--border);
  color: var(--text);
  background: var(--surface);
}

.blacklist-dialog::backdrop {
  background: #26352d66;
}

.blacklist-dialog textarea {
  border-color: var(--border);
  color: var(--text);
  background: var(--field-bg);
}

.select-wrap select {
  color: var(--text);
  color-scheme: light;
  border-color: var(--border);
  background: var(--surface);
  box-shadow: 0 2px 6px #26352d12;
}

.select-wrap select option {
  color: var(--text);
  background: var(--surface);
}

.select-wrap select option:checked {
  color: var(--accent-strong);
  background: #e7f0e8;
}

.select-wrap select:hover {
  border-color: var(--accent);
  background: var(--surface);
}

.select-wrap select:focus-visible {
  outline: 2px solid var(--accent);
}

.select-wrap::after {
  border-color: var(--muted);
}

.store-card,
fieldset {
  background: var(--surface);
}

.store-access-control,
.store-toggle {
  color: var(--text);
}

.store-toggle-track {
  background: #b9c3ba;
}

.store-toggle-input:checked + .store-toggle-track {
  background: var(--accent);
}

.store-toggle-input:not(:checked) + .store-toggle-track {
  background: #c04444;
}

.app-error-dialog {
  position: relative;
  width: min(27rem, calc(100% - 3rem));
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 1.5rem 4rem #26352d33;
}

.app-error-dialog::backdrop {
  background: #26352d66;
  backdrop-filter: blur(3px);
}

.app-error-icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: 50%;
  color: var(--danger);
  background: #f9eae6;
  font-weight: 800;
}

.app-error-dialog.app-success .app-error-icon {
  color: var(--accent);
  background: #e7f0e8;
}

.app-error-dialog.app-success .app-error-eyebrow {
  color: var(--accent);
}

.app-error-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  padding: 0;
  border-radius: 0.4rem;
  color: var(--muted) !important;
  background: transparent !important;
  font-size: 1.4rem;
}

.app-error-close:hover {
  background: var(--surface-raised) !important;
}

.app-error-eyebrow {
  margin: 0;
  color: var(--danger);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08rem;
}

.app-error-dialog h2 {
  margin: 0.35rem 0 0;
  color: var(--text);
  font-size: 1.15rem;
}

.app-error-dialog #app-error-message {
  margin: 0.65rem 0 0;
  color: var(--muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.app-error-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.3rem;
}

.app-error-confirm {
  min-width: 4.75rem;
}