@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* ─── Keyframes ─── */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%       { transform: scale(1.7); opacity: 0.5; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0);  }
  20%       { transform: translateX(-7px); }
  40%       { transform: translateX(7px);  }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px);  }
}

@keyframes notifPop {
  0%, 100% { transform: scale(1);    }
  35%       { transform: scale(1.4); }
  65%       { transform: scale(0.88); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── Custom utilities ─── */

.animate-fade-in {
  animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-slide-in-up {
  animation: slideInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-slide-in-left {
  animation: slideInLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-pulse-dot {
  animation: pulseDot 2s ease-in-out infinite;
}

.animate-notif-pop {
  animation: notifPop 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.animate-shake {
  animation: shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.animate-spin-slow {
  animation: spin 0.7s linear infinite;
}

/* ─── Scrollbar ─── */

* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

*:hover {
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

.dark *:hover {
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

/* ─── Base ─── */

html {
  font-family: 'DM Sans', system-ui, sans-serif;
}

.font-display,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', system-ui, sans-serif;
}

.font-mono-data {
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
}

/* ─── Misc ─── */

button {
  cursor: pointer;
}