:root {
  color-scheme: light dark;
  --suite-bg: #eef2eb;
  --suite-surface: #ffffff;
  --suite-surface-soft: #fbfcfa;
  --suite-ink: #1f2a22;
  --suite-muted: #657064;
  --suite-line: #dfe6dc;
  --suite-accent: #286f4c;
  --suite-accent-dark: #1f573c;
  --suite-danger: #a23b3b;
  --suite-warning-bg: #fff3e8;
  --suite-success-bg: #edf7f0;
}

html {
  background: var(--suite-bg);
}

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

@media (prefers-color-scheme: dark) {
  :root {
    --suite-bg: #111811;
    --suite-surface: #182118;
    --suite-surface-soft: #141d15;
    --suite-ink: #eef5eb;
    --suite-muted: #a8b5a7;
    --suite-line: #2f3d31;
    --suite-accent: #70c58d;
    --suite-accent-dark: #9be0ad;
    --suite-danger: #f08c82;
    --suite-warning-bg: #332717;
    --suite-success-bg: #173021;
  }

  body {
    color: var(--suite-ink);
    background:
      radial-gradient(circle at top left, rgba(112, 197, 141, 0.12), transparent 300px),
      var(--suite-bg);
  }

  .scad-redesign {
    --bg: var(--suite-bg);
    --surface: var(--suite-surface);
    --ink: var(--suite-ink);
    --muted: var(--suite-muted);
    --line: var(--suite-line);
    --accent: var(--suite-accent);
    --accent-dark: var(--suite-accent-dark);
    --danger: var(--suite-danger);
    --yes: #173826;
    --no: #222a22;
    --shadow: none;
    background: var(--suite-bg);
    color: var(--suite-ink);
  }

  .period-shell,
  .admin-shell,
  .admin-login {
    --bg: var(--suite-bg);
    --surface: var(--suite-surface);
    --ink: var(--suite-ink);
    --muted: var(--suite-muted);
    --line: var(--suite-line);
    --accent: var(--suite-accent);
    --accent-strong: var(--suite-accent-dark);
    --badge-yes-bg: var(--suite-success-bg);
    --badge-yes-fg: var(--suite-accent-dark);
    --badge-caution-bg: var(--suite-warning-bg);
    --badge-caution-fg: #f0b36b;
    --badge-no-bg: #321d1d;
    --badge-no-fg: var(--suite-danger);
    --badge-info-bg: #202a21;
    --badge-info-fg: var(--suite-muted);
    background: var(--suite-bg) !important;
    color: var(--suite-ink);
  }

  .scad-redesign .site-header,
  .site-header,
  .panel,
  .workspace-section,
  .member-picker,
  .member-event-row,
  .event-card,
  .event-summary,
  .event-workspace,
  .duty-surface,
  .duty-matrix-wrap,
  .table-wrap,
  .admin-item,
  .admin-accordion,
  .member-row,
  .shift-editor-row,
  .shift-table,
  .member-table,
  .empty-state,
  .result-card {
    border-color: var(--suite-line) !important;
    background: var(--suite-surface) !important;
    color: var(--suite-ink);
  }

  .period-hero,
  .period-nav-link,
  .group-nav a,
  .detail-card,
  .group-card-note,
  .tag-modal-panel,
  .admin-card,
  .admin-toolbar,
  .admin-tabs a,
  .admin-accordion,
  .admin-accordion fieldset {
    border-color: var(--suite-line) !important;
    background: var(--suite-surface) !important;
    color: var(--suite-ink) !important;
  }

  .period-nav-link:hover,
  .period-nav-link.is-active,
  .group-nav a:hover,
  .group-nav a.is-active,
  .admin-tabs a:hover,
  .admin-tabs a.is-active,
  .tag-button,
  .admin-card input,
  .admin-card textarea,
  .admin-card select,
  .admin-toolbar select {
    border-color: var(--suite-line) !important;
    background: var(--suite-surface-soft) !important;
    color: var(--suite-ink) !important;
  }

  .member-event-row:hover,
  .public-shift-row,
  .member-timeline-row,
  .member-row:nth-child(even),
  .member-add-row,
  .member-head,
  .shift-table tr:nth-child(even),
  .shift-editor-head,
  .events-command-head,
  .admin-selector-row,
  .public-participant-list > div,
  .duty-matrix thead th,
  .duty-matrix thead th:first-child,
  .availability-matrix th:first-child,
  .duty-matrix th:first-child,
  .matrix-answer.unknown,
  .admin-duty-matrix .matrix-answer.unknown {
    background: var(--suite-surface-soft) !important;
    color: var(--suite-ink);
  }

  .member-head,
  .shift-editor-head,
  .events-command-head,
  .duty-matrix thead th,
  .statistics-table thead th {
    background: #1f2b20 !important;
    color: var(--suite-muted) !important;
  }

  label,
  .checkline,
  .member-add-row label,
  .member-row label,
  .member-table .checkline,
  .member-add-row .checkline,
  .compact-check {
    color: var(--suite-muted) !important;
  }

  .member-row,
  .member-add-row,
  .member-head {
    border-color: var(--suite-line) !important;
  }

  .member-row input,
  .member-add-row input {
    background: #0d160f !important;
  }

  input[type="checkbox"] {
    accent-color: var(--suite-accent);
  }

  input,
  select,
  textarea,
  .workshop-rsvp-options span,
  .response-option span {
    border-color: var(--suite-line) !important;
    background: #101711 !important;
    color: var(--suite-ink) !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: #839083;
  }

  .button.secondary,
  button.secondary,
  .admin-menu a:hover,
  .admin-menu a:focus,
  .admin-menu a.active,
  .member-event-status,
  .state-archived .member-event-status,
  .member-event-status.archived,
  .state-empty .member-event-status,
  .member-event-status.empty {
    background: #202a21 !important;
    color: var(--suite-ink) !important;
  }

  .button.primary,
  button.primary {
    background: #2f8f58 !important;
    color: #ffffff !important;
  }

  .brand strong,
  .member-titlebar h1,
  .admin-page-title h1,
  .member-event-head h1,
  .intro h1,
  .event-workspace-head h1,
  .event-summary h2 {
    color: var(--suite-ink) !important;
  }

  .brand small,
  .member-event small,
  .admin-page-title p,
  .member-titlebar p,
  .event-workspace-head p,
  .event-summary p,
  .duty-surface > header p,
  .statistics-table thead th {
    color: var(--suite-muted) !important;
  }

  .member-event-status.complete,
  .state-complete .member-event-status,
  .attendance-state.yes,
  .coverage.ok,
  .matrix-answer.yes,
  .response-option.yes input:checked + span,
  .workshop-rsvp-options input:checked + span {
    background: var(--suite-success-bg) !important;
    color: var(--suite-accent-dark) !important;
  }

  .state-todo .member-event-status,
  .member-event-status.todo,
  .coverage.missing {
    background: var(--suite-warning-bg) !important;
    color: #f0b36b !important;
  }

  .matrix-answer.no,
  .response-option.no input:checked + span {
    background: #321d1d !important;
    color: var(--suite-danger) !important;
  }

  table,
  th,
  td {
    border-color: var(--suite-line) !important;
  }

  .statistics-table,
  .statistics-table th,
  .statistics-table td {
    background: var(--suite-surface) !important;
    color: var(--suite-ink) !important;
  }

  .statistics-table thead th {
    background: #1f2b20 !important;
    color: var(--suite-muted) !important;
  }

  .statistics-table tbody tr:nth-child(even) > * {
    background: var(--suite-surface-soft) !important;
  }
}