/* ── Brand colours ──────────────────────────────────────────────────────── */
.bg-primary   { background-color: #16a34a; }   /* green-600 */
.bg-secondary { background-color: #15803d; }   /* green-700 */
.bg-light     { background-color: #fafaf9; }   /* stone-50  */
.bg-accent    { background-color: #f59e0b; }   /* amber-500 */

.text-primary   { color: #ffffff; }
.text-secondary { color: #16a34a; }
.text-accent    { color: #d97706; }            /* amber-600 */

/* ── Typography ─────────────────────────────────────────────────────────── */
.font-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Shadows ─────────────────────────────────────────────────────────────── */
.shadow-primary {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.12), 0 2px 4px -2px rgba(0,0,0,.08);
}
.shadow-secondary {
  box-shadow: inset 0 2px 4px 0 rgba(0,0,0,.06);
}

/* ── Milestone toast card ────────────────────────────────────────────────── */
#milestone-card {
  /* Smooth pop-in / pop-out driven by JS class swaps */
  will-change: transform, opacity;
}

/* ── Grid cell entrance (staggered) ─────────────────────────────────────── */
@keyframes cell-enter {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1);   }
}
.cell-enter {
  animation: cell-enter 0.25s ease-out both;
}

/* ── Grid cell pop on check-in ───────────────────────────────────────────── */
@keyframes cell-pop {
  0%   { transform: scale(1);    }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1);    }
}
.cell-pop { animation: cell-pop 0.3s ease-out; }

/* ── Check-in button amber pulse ─────────────────────────────────────────── */
@keyframes btn-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(245,158,11,0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(245,158,11,0);   }
  100% { box-shadow: 0 0 0 0   rgba(245,158,11,0);   }
}
.btn-pulse { animation: btn-pulse 0.6s ease-out; }

/* ── HTMX fragment fade-in ───────────────────────────────────────────────── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fade-in { animation: fade-in 0.15s ease-out; }

/* ── Dark mode overrides ─────────────────────────────────────────────────── */
/* Flip the classes used across fragments that don't use Tailwind dark: variants */
html.dark body,
html.dark .bg-light     { background-color: #111827; color: #f9fafb; }
html.dark .bg-gray-200  { background-color: #374151; }
html.dark .bg-gray-100  { background-color: #1f2937; }
html.dark .bg-white     { background-color: #1f2937; }
html.dark .text-gray-800 { color: #f3f4f6; }
html.dark .text-gray-700 { color: #e5e7eb; }
html.dark .text-gray-600 { color: #d1d5db; }
html.dark .text-gray-500 { color: #9ca3af; }
html.dark .border-gray-300 { border-color: #4b5563; }
html.dark .bg-red-50    { background-color: #450a0a; }
html.dark #milestone-card { background-color: #1f2937; }