/* Theme colors supplement the shared layout. Dark is the default. */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eaf0ed;
  --muted: #abb8b9;
  --line: #344149;
  --paper: #111619;
  --navy: #0d1215;
  --accent: #237b46;
  --accent-hover: #1c683a;
  --brand: #64bd73;
  --surface: #1a2429;
  --surface-soft: #202d32;
  --surface-hover: #24333a;
  --header: #151d21;
  --sidebar-ink: #c0cec6;
  --nav-selected: #223d2b;
  --nav-selected-ink: #dbf2e0;
  --input-bg: #121c20;
  --input-border: #697b80;
  --placeholder: #a1afb3;
  --focus: #86d296;
  --focus-ring: #86d29633;
  --positive-bg: #223c2c;
  --positive-ink: #a6d6b0;
  --urgent: #ed8e9b;
  --high: #e4b67f;
  --normal: #8abfe8;
  --low: #a6c1b2;
  --urgent-bg: #41282f;
  --urgent-ink: #ffb3bd;
  --high-bg: #3c3020;
  --high-ink: #f4c68d;
  --normal-bg: #223748;
  --normal-ink: #acd4f4;
  --low-bg: #293a31;
  --low-ink: #c2d7cb;
  --footer-bg: #111619f2;
  --backdrop: #020805bb;
  --shadow: #00000045;
}

html[data-theme="light"] {
  color-scheme: light;
  --ink: #202e25;
  --muted: #607268;
  --line: #dce5df;
  --paper: #f4f7f5;
  --navy: #eef4ef;
  --accent: #237b46;
  --accent-hover: #1c683a;
  --brand: #328449;
  --surface: #ffffff;
  --surface-soft: #f0f5f1;
  --surface-hover: #f4f8f5;
  --header: #ffffff;
  --sidebar-ink: #4e6356;
  --nav-selected: #dfeddf;
  --nav-selected-ink: #205e35;
  --input-bg: #ffffff;
  --input-border: #7f9286;
  --placeholder: #607667;
  --focus: #237b46;
  --focus-ring: #237b4626;
  --positive-bg: #e7f2e9;
  --positive-ink: #2e6940;
  --urgent: #b43348;
  --high: #9a591d;
  --normal: #306c9e;
  --low: #5d7466;
  --urgent-bg: #fcecef;
  --urgent-ink: #a82b40;
  --high-bg: #fff1df;
  --high-ink: #855017;
  --normal-bg: #eaf3fb;
  --normal-ink: #2e638f;
  --low-bg: #ecf2ed;
  --low-ink: #4d6958;
  --footer-bg: #f4f7f5f2;
  --backdrop: #172e2466;
  --shadow: #14271d1c;
}

html { background: var(--paper); color: var(--ink); }
body, .workspace, .board-page { background: var(--paper); color: var(--ink); }
::selection { background: var(--nav-selected); color: var(--nav-selected-ink); }
a:focus-visible, button:focus-visible { outline-color: var(--focus); }
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--focus-ring);
  border-color: var(--focus);
}
.skip-link { background: var(--surface); color: var(--ink); }

.sidebar { background: var(--navy); color: var(--ink); border-right: 1px solid var(--line); }
.brand small, .nav-label, .sidebar-footer { color: var(--muted); }
.nav-item, .board-link { color: var(--sidebar-ink); }
.nav-item:hover { background: var(--surface-hover); color: var(--ink); }
.nav-item.selected {
  background: var(--nav-selected);
  color: var(--nav-selected-ink);
  box-shadow: inset 3px 0 var(--brand);
}
.board-link, .sidebar-footer { border-color: var(--line); }
.board-link:hover { color: var(--brand); }
.office-symbol { border-color: var(--input-border); color: var(--muted); }

.topbar { background: var(--header); color: var(--muted); }
.today, .breadcrumb-separator { color: var(--muted); }
.tasks-panel, .new-task-panel, .standalone-form {
  background: var(--surface);
  border-color: var(--line);
}
.new-task-panel { box-shadow: 0 4px 15px var(--shadow); }
.list-heading > span, .task-meta, .tag > span { color: var(--muted); }
.count { background: var(--surface-soft); color: var(--muted); }
.task-row { border-color: var(--line); }
.task-row:hover { background: var(--surface-hover); }
.task-row.priority-low::before { background: var(--low); }
.complete-button {
  background: var(--input-bg);
  border-color: var(--input-border);
  box-shadow: none;
}
.complete-button:hover, .complete-button:focus-visible {
  background: var(--positive-bg);
  border-color: var(--brand);
  color: var(--positive-ink);
}
.priority-badge.urgent { background: var(--urgent-bg); color: var(--urgent-ink); }
.priority-badge.high { background: var(--high-bg); color: var(--high-ink); }
.priority-badge.normal { background: var(--normal-bg); color: var(--normal-ink); }
.priority-badge.low { background: var(--low-bg); color: var(--low-ink); }
.completed-row .priority-badge { opacity: 1; }
.edit-button { color: var(--muted); }
.edit-button:hover { background: var(--surface-soft); color: var(--ink); }
.delete-button { color: var(--muted); }
.delete-button:hover, .delete-button:focus-visible { background: var(--urgent-bg); color: var(--urgent-ink); }
.delete-task-meta, .delete-description { color: var(--muted); }
.list-footer { background: var(--surface-soft); color: var(--muted); }
.form-symbol { background: var(--positive-bg); color: var(--positive-ink); }
.field input, .field select, .field textarea {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--ink);
}
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--focus); }
.field [aria-invalid="true"] { border-color: var(--urgent); }
.field small, .form-footnote, .workspace-footer { color: var(--muted); }
.button { background: var(--surface); border-color: var(--input-border); color: var(--ink); }
.button:hover { background: var(--surface-hover); }
.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  box-shadow: 0 2px 5px var(--shadow);
}
.button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button.danger { background: #b43348; border-color: #b43348; color: #ffffff; }
.button.danger:hover { background: #98263a; border-color: #98263a; }
.empty-icon { background: var(--positive-bg); border-color: var(--line); color: var(--positive-ink); }
.done-icon { color: var(--positive-ink); }
.back-link { color: var(--positive-ink); }

dialog {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 30px 100px var(--shadow);
}
dialog::backdrop { background: var(--backdrop); }
.dialog-close { color: var(--muted); }
.dialog-close:hover { color: var(--ink); }
.form-errors, .errorlist { background: var(--urgent-bg); color: var(--urgent-ink); }
.toast { background: #205d38; color: #ffffff; box-shadow: 0 8px 35px var(--shadow); }
.toast.error, .connection-status { background: #943345; color: #ffffff; }
.server-messages { background: var(--positive-bg); color: var(--positive-ink); }

.board-header { background: var(--navy); color: var(--ink); border-bottom: 1px solid var(--line); }
.board-clock, .board-live, .board-index { color: var(--muted); }
.board-clock [data-clock] { color: var(--ink); }
.board-page .priority-summary { background: var(--surface); }
.board-rows .task-row { background: var(--surface); border-color: var(--line); }
.board-footer { background: var(--footer-bg); color: var(--muted); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 10px;
  min-height: 36px;
  border: 1px solid var(--input-border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.theme-toggle:hover { background: var(--surface-hover); border-color: var(--brand); }
.theme-icon { color: var(--positive-ink); font-size: 17px; line-height: 1; }

@media (max-width: 640px) {
  .sidebar { border-right: 0; }
  .nav-item.selected {
    background: transparent;
    box-shadow: inset 0 -3px var(--brand);
  }
}