/* THEME TOKENS — LIGHT MODE */
:root {
  /* Base surfaces */
  --color-bg: 241 245 249;          /* slate-100 — softer gray page background */
  --color-surface: 255 255 255;     /* white */
  --color-surface-2: 241 245 249;   /* slate-100 */
  --color-border: 226 232 240;      /* slate-200 */
  --color-table-row-alt: 248 250 252; /* slate-50 — subtle alternating table row */

  /* Text */
  --color-text: 15 23 42;           /* slate-900 */
  --color-text-muted: 100 116 139;  /* slate-500 */

  /* Brand */
  --color-primary: 37 99 235;       /* blue-600 */
  --color-primary-hover: 29 78 216; /* blue-700 */

  /* Semantic */
  --color-success: 22 163 74;       /* green-600 */
  --color-danger: 220 38 38;        /* red-600 */
  --color-warning: 217 119 6;       /* amber-600 */
  --color-info: 2 132 199;          /* sky-600 */

  /* Boolean helpers */
  --color-true: 22 163 74;
  --color-false: 220 38 38;
}

/* DARK MODE TOKENS */
html.dark,
.dark {
  --color-bg: 15 23 42;             /* slate-900 */
  --color-surface: 24 33 47;        /* darker than slate-800 — softer frames */
  --color-surface-2: 40 52 70;      /* darker than slate-700 */
  --color-border: 51 65 85;         /* slate-700 — slightly darker border */
  --color-table-row-alt: 30 41 59;  /* slate-800 — subtle alternating table row */

  --color-text: 241 245 249;        /* slate-100 */
  --color-text-muted: 148 163 184;  /* slate-400 */

  --color-primary: 59 130 246;      /* blue-500 */
  --color-primary-hover: 96 165 250;/* blue-400 */

  --color-success: 34 197 94;       /* green-500 */
  --color-danger: 248 113 113;      /* red-400 */
  --color-warning: 245 158 11;      /* amber-500 */
  --color-info: 56 189 248;         /* sky-400 */

  --color-true: 34 197 94;
  --color-false: 248 113 113;
}

/* Overdue deadline: force danger color (overrides parent text color) */
.board-deadline-overdue,
.board-deadline-overdue svg {
  color: rgb(var(--color-danger)) !important;
}

/* Flatpickr date picker — dark mode */
html.dark .flatpickr-calendar,
.dark .flatpickr-calendar {
  background: rgb(var(--color-surface));
  border-color: rgb(var(--color-border));
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
}
html.dark .flatpickr-calendar.arrowTop::before,
html.dark .flatpickr-calendar.arrowTop::after,
.dark .flatpickr-calendar.arrowTop::before,
.dark .flatpickr-calendar.arrowTop::after {
  border-bottom-color: rgb(var(--color-surface));
}
html.dark .flatpickr-months,
.dark .flatpickr-months {
  background: rgb(var(--color-surface-2));
  border-color: rgb(var(--color-border));
}
html.dark .flatpickr-current-month,
html.dark .flatpickr-monthDropdown-months,
html.dark .numInputWrapper span.arrowUp::after,
html.dark .numInputWrapper span.arrowDown::after,
.dark .flatpickr-current-month,
.dark .flatpickr-monthDropdown-months,
.dark .numInputWrapper span.arrowUp::after,
.dark .numInputWrapper span.arrowDown::after {
  color: rgb(var(--color-text));
}
html.dark .flatpickr-weekday,
.dark .flatpickr-weekday {
  color: rgb(var(--color-text-muted));
}
html.dark .flatpickr-day,
.dark .flatpickr-day {
  color: rgb(var(--color-text));
  border-color: transparent;
}
html.dark .flatpickr-day:hover:not(.flatpickr-disabled),
.dark .flatpickr-day:hover:not(.flatpickr-disabled) {
  background: rgb(var(--color-surface-2));
  border-color: rgb(var(--color-surface-2));
  color: rgb(var(--color-text));
}
html.dark .flatpickr-day.today,
.dark .flatpickr-day.today {
  border-color: rgb(var(--color-primary));
  background: transparent;
  color: rgb(var(--color-text));
}
html.dark .flatpickr-day.today:hover,
.dark .flatpickr-day.today:hover {
  background: rgb(var(--color-surface-2));
  color: rgb(var(--color-text));
}
html.dark .flatpickr-day.selected,
html.dark .flatpickr-day.selected:hover,
.dark .flatpickr-day.selected,
.dark .flatpickr-day.selected:hover {
  background: rgb(var(--color-primary));
  border-color: rgb(var(--color-primary));
  color: #fff;
}
html.dark .flatpickr-day.flatpickr-disabled,
html.dark .flatpickr-day.flatpickr-disabled:hover,
.dark .flatpickr-day.flatpickr-disabled,
.dark .flatpickr-day.flatpickr-disabled:hover {
  color: rgb(var(--color-text-muted));
  opacity: 0.5;
}
html.dark .flatpickr-prev-month:hover svg,
html.dark .flatpickr-next-month:hover svg,
.dark .flatpickr-prev-month:hover svg,
.dark .flatpickr-next-month:hover svg {
  fill: rgb(var(--color-primary));
}
html.dark .flatpickr-prev-month svg,
html.dark .flatpickr-next-month svg,
.dark .flatpickr-prev-month svg,
.dark .flatpickr-next-month svg {
  fill: rgb(var(--color-text));
  width: 14px;
  height: 14px;
}