/* Card palettes keep the same status meanings in light and dark mode. */
:root {
  --task-blue-bg: #9addf0;
  --task-blue-ink: #215468;
  --task-amber-bg: #ffe078;
  --task-amber-ink: #6c4b0b;
  --task-green-bg: #a6e6ae;
  --task-green-ink: #265637;
  --task-red-bg: #ffb2a3;
  --task-red-ink: #82352b;
}
:root[data-card-palette='candy'] {
  --task-blue-bg: #d3c9ff;
  --task-blue-ink: #51427f;
  --task-amber-bg: #ffe5a5;
  --task-amber-ink: #71520d;
  --task-green-bg: #b4edd6;
  --task-green-ink: #285b48;
  --task-red-bg: #ffc1d7;
  --task-red-ink: #843550;
}
:root[data-card-palette='ocean'] {
  --task-blue-bg: #a0def8;
  --task-blue-ink: #24556e;
  --task-amber-bg: #f7e18d;
  --task-amber-ink: #6b5413;
  --task-green-bg: #8ee0c1;
  --task-green-ink: #205b48;
  --task-red-bg: #ffc4a3;
  --task-red-ink: #7c4027;
}
:root[data-theme='dark'] {
  --task-blue-bg: #344957;
  --task-blue-ink: #b9e8f7;
  --task-amber-bg: #544524;
  --task-amber-ink: #ffe39a;
  --task-green-bg: #2e4b38;
  --task-green-ink: #a9edb8;
  --task-red-bg: #603d3b;
  --task-red-ink: #ffd2c8;
}
:root[data-theme='dark'][data-card-palette='candy'] {
  --task-blue-bg: #444061;
  --task-blue-ink: #ddd1ff;
  --task-amber-bg: #51432f;
  --task-amber-ink: #ffe1a6;
  --task-green-bg: #314d44;
  --task-green-ink: #a8ead3;
  --task-red-bg: #5d364b;
  --task-red-ink: #ffbfd7;
}
:root[data-theme='dark'][data-card-palette='ocean'] {
  --task-blue-bg: #254b60;
  --task-blue-ink: #b4e7ff;
  --task-amber-bg: #51482a;
  --task-amber-ink: #ffe79f;
  --task-green-bg: #234b46;
  --task-green-ink: #a0efdd;
  --task-red-bg: #5a3e32;
  --task-red-ink: #ffd2b5;
}
:root[data-card-palette='pastel'] {
  --task-blue-bg: var(--blue-bg);
  --task-blue-ink: var(--blue);
  --task-amber-bg: var(--amber-bg);
  --task-amber-ink: var(--amber);
  --task-green-bg: var(--green-bg);
  --task-green-ink: var(--green);
  --task-red-bg: var(--red-bg);
  --task-red-ink: var(--red);
}
.card-appearance {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: -4px 16px;
}
.card-palette-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.card-palette-control select {
  min-height: 36px;
  min-width: 120px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
}
.palette-swatches {
  display: inline-flex;
  gap: 4px;
}
.palette-swatches i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--swatch-ink) 40%, var(--surface));
  background: var(--swatch-bg);
}
.palette-todo {
  --swatch-bg: var(--task-blue-bg);
  --swatch-ink: var(--task-blue-ink);
}
.palette-doing {
  --swatch-bg: var(--task-amber-bg);
  --swatch-ink: var(--task-amber-ink);
}
.palette-done {
  --swatch-bg: var(--task-green-bg);
  --swatch-ink: var(--task-green-ink);
}
.palette-urgent {
  --swatch-bg: var(--task-red-bg);
  --swatch-ink: var(--task-red-ink);
}
.task-card .badge-urgent,
.task-card .badge-overdue {
  color: var(--task-red-ink);
  background: var(--task-red-bg);
}
.task-card .badge-routine {
  color: var(--task-amber-ink);
  background: var(--task-amber-bg);
}
.task-card .badge-notUrgent {
  color: var(--task-blue-ink);
  background: var(--task-blue-bg);
}
.task-card .badge-done {
  color: var(--task-green-ink);
  background: var(--task-green-bg);
}
.task-card .task-deadline.overdue {
  color: var(--task-red-ink);
}
@media (pointer: coarse) {
  .card-palette-control select {
    min-height: 44px;
  }
}