/* Product theme layer — Tailwind (via /vendor) handles layout/utility
   classes; this file only carries brand tokens, states and motion that
   utility classes can't express cleanly. */

h1, h2, h3, .font-head {
  font-family: 'Comfortaa', ui-rounded, sans-serif;
}

body, p, span, a, button, input, label {
  font-family: 'Inter', system-ui, sans-serif;
}

/* ---- habit checkbox: bounce + fill on completion ---- */
.habit-check {
  background: transparent;
}
.habit-check .check-icon {
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 200ms ease, transform 200ms ease;
}
.habit-check.is-done {
  background: #4CAF8B;
  border-color: #4CAF8B;
}
.habit-check.is-done .check-icon {
  opacity: 1;
  transform: scale(1);
}
.habit-check.just-checked {
  animation: check-bounce 320ms cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes check-bounce {
  0%   { transform: scale(0.85); }
  55%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ---- streak badge: glow + grow when a streak extends ---- */
.streak-badge {
  transition: transform 200ms ease, background-color 250ms ease, opacity 200ms ease;
}
.streak-badge.streak-up {
  animation: streak-pop 420ms ease;
  background-color: #FFE3C6;
}
@keyframes streak-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.streak-badge.streak-up .streak-flame {
  filter: drop-shadow(0 0 6px rgba(255, 159, 90, .8));
}

/* ---- skeleton shimmer (insight generation / motivation loading) ---- */
.skeleton-shimmer {
  position: relative;
  overflow: hidden;
  background-color: #E5E1D8;
}
.skeleton-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  100% { transform: translateX(100%); }
}

/* ---- generic fade/scale transition helper ---- */
.fade-swap {
  transition: opacity 250ms ease, transform 250ms ease;
}
.fade-swap.is-hidden {
  opacity: 0;
  transform: translateY(4px);
}

/* ---- toast ---- */
.toast {
  animation: toast-in 220ms ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .habit-check.just-checked,
  .streak-badge.streak-up,
  .toast,
  .skeleton-shimmer::after {
    animation: none !important;
  }
}