@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

@import "tailwindcss";

@theme{
    --default-font-family: "Google Sans", sans-serif;
}   

/* ── Font ── */
body { font-family: 'Google Sans', sans-serif; }

/* ── Tailwind dark mode via class ── */
/* (add darkMode: 'class' to tailwind.config.js) */

/* ── Card entrance animation ── */
.sh-card-animate { animation: sh-fade-up .28s ease both; }
@keyframes sh-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Online pulse dot ── */
@keyframes sh-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .4; }
}
.sh-pulse { animation: sh-pulse 2s ease-in-out infinite; }

/* ── Toast entrance ── */
.sh-toast-enter { animation: sh-toast-in .25s cubic-bezier(.34,1.4,.64,1) both; }
@keyframes sh-toast-in {
  from { opacity: 0; transform: translateX(10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ── Input error state (border override) ── */
.input-error {
  border-color: rgb(248 113 113) !important; /* rose-400 */
  box-shadow: 0 0 0 3px rgba(248,113,113,.10) !important;
}
.dark .input-error {
  border-color: rgb(225 29 72 / .6) !important; /* rose-600/60 */
}

/* ── Hidden card (search/filter) ── */
[data-hidden] { display: none !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .sh-card-animate, .sh-pulse, .sh-toast-enter { animation: none !important; }
}