@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --font-inter: 'Inter', sans-serif;
    
    /* Global Brand Colors - Light Theme Fallbacks */
    --brand-primary: #1e3a8a; /* Deep Blue */
    --brand-secondary: #3b82f6; 
    --brand-surface: #ffffff;
    --brand-900: #f8fafc; /* Very Light Gray */
    --brand-dark: #0f172a;
    --brand-accent: #f97316; /* Orange */
  }

  body {
    font-family: var(--font-inter);
  }
}

@layer utilities {
  .glass {
    @apply bg-white/70 backdrop-blur-lg border-b border-slate-200/50;
  }
  
  .glass-card {
    @apply bg-white/60 backdrop-blur-md border border-slate-200/60 rounded-2xl shadow-sm;
  }

  .glass-card-dark {
    @apply bg-slate-900/90 backdrop-blur-md border border-white/10 rounded-2xl;
  }
  
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r;
  }
  
  .hover-glow {
    @apply transition-all duration-300 hover:shadow-[0_0_20px_rgba(59,130,246,0.3)];
  }
}

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

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

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Dropdown Animation */
.dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.group:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Carousel Animations */
.carousel-slide {
  transition: opacity 0.8s ease-in-out;
}

/* Scroll Header Overrides */
.scrolled-header nav > a.text-white,
.scrolled-header .group > a.text-white {
    color: #1e293b !important; /* text-slate-800 */
}
.scrolled-header nav > a.text-white:hover,
.scrolled-header .group > a.text-white:hover {
    color: #3b82f6 !important; /* hover:text-brand-primary */
}
.scrolled-header img[src="LogoH.png"] {
    filter: brightness(0) hue-rotate(215deg) contrast(90%) !important;
}
.scrolled-header a[href="login.html"] i,
.scrolled-header a[href="login.html"] {
    color: #1e293b !important;
}
.scrolled-header a[href="login.html"]:hover {
    color: #3b82f6 !important;
}