/* Custom Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');

.font-sans {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.font-outfit {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
}

/* Animations */
.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 70s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-slideIn {
  animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.animate-scaleUp {
  animation: scaleUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ================================================================
   FORCE LIGHT MODE — All browsers, all OS preferences
   ================================================================ */

/* Override OS-level dark mode preference — site always shows light */
@media (prefers-color-scheme: dark) {
  html, body {
    color-scheme: light !important;
    background-color: #f8fafc !important;
    color: #0f172a !important;
  }
}

/* Ensure html/body never turn dark */
html {
  color-scheme: light !important;
}

html.dark,
html[data-theme="dark"] {
  color-scheme: light !important;
  background-color: #f8fafc !important;
  filter: none !important;
}

/* Kill any residual dark mode body overrides */
body.dark,
html.dark body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

/* Smooth Transitions */
* {
  transition-property: background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Global Scrollbar Customization */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.3);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.5);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.25);
  border-radius: 4px;
}