/* Import Inter Font from Google 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&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --font-sans: 'Inter', sans-serif;
  --font-display: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  color-scheme: dark;
}

/* Light mode overrides if user toggles theme */
html.light {
  color-scheme: light;
}

body {
  font-family: var(--font-sans);
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.85);
}

.light ::-webkit-scrollbar-track {
  background: rgba(244, 244, 245, 1);
}

::-webkit-scrollbar-thumb {
  background: rgba(63, 63, 70, 0.5);
  border-radius: 4px;
  border: 2px solid rgba(0, 0, 0, 0.85);
}

.light ::-webkit-scrollbar-thumb {
  background: rgba(161, 161, 170, 0.6);
  border: 2px solid rgba(244, 244, 245, 1);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(161, 161, 170, 0.8);
}

/* Selection Highlight */
::selection {
  background: rgba(124, 58, 237, 0.3);
  color: #ffffff;
}

.light ::selection {
  background: rgba(124, 58, 237, 0.15);
  color: #1e1b4b;
}

/* Linear-style Grid Backgrounds */
.bg-grid-pattern {
  background-size: 50px 50px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

.light .bg-grid-pattern {
  background-image: 
    linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
}

.bg-dot-pattern {
  background-size: 24px 24px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

.light .bg-dot-pattern {
  background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
}

/* Dynamic Spotlight Hover Card Effect */
.spotlight-card {
  position: relative;
  overflow: hidden;
}

.spotlight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    800px circle at var(--mouse-x, 0) var(--mouse-y, 0),
    rgba(255, 255, 255, 0.06),
    transparent 40%
  );
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.spotlight-card:hover::before {
  opacity: 1;
}

/* Custom animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.15;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.05);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 10s ease-in-out infinite;
}

/* Interactive Command Palette Transitions */
.palette-backdrop {
  backdrop-filter: blur(8px);
  transition: opacity 0.2s ease-out;
}

.palette-container {
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

/* Reveal on Scroll Animations (using Intersection Observer) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Accent Gradients */
.text-gradient {
  background: linear-gradient(135deg, #ffffff 30%, #a1a1aa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-purple {
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 50%, #6d28d9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-emerald {
  background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #047857 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-cyan {
  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 50%, #0891b2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hide default search inputs clear button */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}