:root {
  --page: #f7f9fb;
  --surface: #ffffff;
  --surface-soft: #f4f7f8;
  --text: #17212b;
  --muted: #43515f;
  --muted-2: #637485;
  --border: #dfe7ee;
  --border-strong: #c9d3dc;
  --primary: #0f6b5f;
  --primary-text: #ffffff;
  --secondary: #dfe7ee;
  --secondary-text: #17212b;
  --danger: #b52b22;
  --danger-soft: #fff8f8;
  --shadow: 0 8px 22px rgba(23, 33, 43, 0.08);
}

[data-theme="classic"] {
  --page: #f7f9fb;
  --surface: #ffffff;
  --surface-soft: #f4f7f8;
  --text: #17212b;
  --muted: #43515f;
  --muted-2: #637485;
  --border: #dfe7ee;
  --border-strong: #c9d3dc;
  --primary: #0f6b5f;
}

[data-theme="graphite"] {
  --page: #f3f4f2;
  --surface: #ffffff;
  --surface-soft: #ecefed;
  --text: #202422;
  --muted: #555f59;
  --muted-2: #68736d;
  --border: #d7ddd9;
  --border-strong: #b9c3be;
  --primary: #2f5d50;
  --shadow: 0 8px 22px rgba(32, 36, 34, 0.09);
}

[data-theme="marine"] {
  --page: #f1f8f8;
  --surface: #ffffff;
  --surface-soft: #e8f2f2;
  --text: #15282b;
  --muted: #3f5e63;
  --muted-2: #5d7478;
  --border: #cfe1e2;
  --border-strong: #a8c7ca;
  --primary: #087789;
  --shadow: 0 8px 22px rgba(8, 119, 137, 0.10);
}

[data-theme="forest"] {
  --page: #f3f8f1;
  --surface: #ffffff;
  --surface-soft: #eaf2e7;
  --text: #172619;
  --muted: #465d49;
  --muted-2: #637868;
  --border: #d5e2d1;
  --border-strong: #b4c9af;
  --primary: #3f7d3d;
  --shadow: 0 8px 22px rgba(63, 125, 61, 0.10);
}

[data-theme="ruby"] {
  --page: #fbf5f7;
  --surface: #ffffff;
  --surface-soft: #f4eaee;
  --text: #2b1a20;
  --muted: #60414c;
  --muted-2: #7a6070;
  --border: #e7d3db;
  --border-strong: #caaeba;
  --primary: #9c2f52;
  --shadow: 0 8px 22px rgba(156, 47, 82, 0.11);
}

[data-theme="cobalt"] {
  --page: #f3f6fb;
  --surface: #ffffff;
  --surface-soft: #eaf0f8;
  --text: #172236;
  --muted: #46556f;
  --muted-2: #66748b;
  --border: #d6dfec;
  --border-strong: #b4c3d8;
  --primary: #2f66a6;
  --shadow: 0 8px 22px rgba(47, 102, 166, 0.10);
}

html, body, :root {
  background: var(--page);
  color: var(--text);
}

body,
.login,
.app,
main {
  background: var(--page);
  color: var(--text);
}

header,
.topbar,
.card,
.tableWrap,
dialog,
.details,
.infoRow,
.taskProgress,
input,
textarea,
select,
.tabs button {
  background: var(--surface);
  color: var(--text);
}

button {
  background: var(--primary);
  color: var(--primary-text);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 22%, transparent);
  cursor: pointer;
  position: relative;
  transform: translateY(0);
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 120ms ease,
    filter 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

button.secondary,
menu button:first-child,
.secondary {
  background: var(--secondary);
  color: var(--secondary-text);
  box-shadow: 0 6px 14px rgba(23, 33, 43, 0.08);
}

button:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--primary) 28%, transparent);
}

button.secondary:hover,
menu button:first-child:hover,
.secondary:hover {
  box-shadow: 0 10px 20px rgba(23, 33, 43, 0.11);
}

button:active {
  filter: brightness(0.98);
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--primary) 20%, transparent);
}

button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent);
  outline-offset: 2px;
}

button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.25);
  opacity: 0.58;
  transform: none;
  box-shadow: none;
}

a,
.tabs button {
  color: var(--primary);
}

.tabs,
.taskProgress progress,
.taskProgress progress::-webkit-progress-bar {
  background: var(--border-strong);
}

.tabs button.active,
.taskProgress progress::-webkit-progress-value,
.taskProgress progress::-moz-progress-bar {
  background: var(--primary);
  color: var(--primary-text);
}

.tabs button {
  box-shadow: none;
}

.tabs button:hover {
  transform: none;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--primary) 28%, transparent);
}

.tabs button:active {
  transform: none;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--primary) 40%, transparent);
}

input,
textarea,
select,
header,
.topbar,
.band,
.tableWrap,
th,
td,
.card,
.details,
.infoRow,
.photos img,
.tabs,
.taskProgress {
  border-color: var(--border);
}

label,
.card p,
.meta,
.taskProgressText,
.details strong,
.infoRow strong,
th {
  color: var(--muted);
}

.topbar span,
.empty,
.note {
  color: var(--muted-2);
}

th,
.details {
  background: var(--surface-soft);
}

.danger {
  background: var(--danger-soft);
}

.dangerButton {
  background: var(--danger);
  color: #ffffff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--danger) 22%, transparent);
}

.dangerButton:hover {
  box-shadow: 0 12px 24px color-mix(in srgb, var(--danger) 28%, transparent);
}

@media (hover: none) {
  button:hover {
    filter: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }
}