@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Primary Colors - Dark Blue Theme */
  --color-primary: #1E3A8A; /* blue-900 - Deep blue for modern look */
  --color-primary-700: #1E40AF; /* blue-800 - Slightly lighter variant */
  --color-primary-600: #2563EB; /* blue-600 - Medium blue */
  --color-primary-500: #3B82F6; /* blue-500 - Brighter blue accent */
  --color-secondary: #0F172A; /* slate-900 - Almost black blue */
  --color-secondary-800: #1E293B; /* slate-800 - Dark blue-gray */
  --color-secondary-700: #334155; /* slate-700 - Medium dark */
  
  /* Accent Colors */
  --color-accent: #06B6D4; /* cyan-500 - Modern cyan accent */
  --color-accent-400: #22D3EE; /* cyan-400 - Lighter cyan */
  --color-accent-600: #0891B2; /* cyan-600 - Darker cyan */
  --color-accent-secondary: #3B82F6; /* blue-500 - Secondary accent */
  
  /* Background Colors */
  --color-background: #0F172A; /* slate-900 - Dark background */
  --color-surface: #1E293B; /* slate-800 - Card backgrounds */
  --color-surface-light: #334155; /* slate-700 - Lighter surface */
  --color-surface-100: #475569; /* slate-600 - Even lighter */
  
  /* Text Colors */
  --color-text-primary: #F8FAFC; /* slate-50 - Light text on dark */
  --color-text-secondary: #CBD5E1; /* slate-300 - Secondary text */
  --color-text-muted: #94A3B8; /* slate-400 - Muted text */
  --color-text-accent: #06B6D4; /* cyan-500 - Accent text */
  
  /* Status Colors */
  --color-success: #10B981; /* emerald-500 - Success */
  --color-success-100: #065F46; /* emerald-800 - Dark success bg */
  --color-warning: #F59E0B; /* amber-500 - Warning */
  --color-warning-100: #92400E; /* amber-800 - Dark warning bg */
  --color-error: #EF4444; /* red-500 - Error */
  --color-error-100: #991B1B; /* red-800 - Dark error bg */
  
  /* Border Colors */
  --color-border: #374151; /* gray-700 - Borders on dark */
  --color-border-light: #4B5563; /* gray-600 - Lighter borders */
  
  /* Gradient Colors */
  --gradient-primary: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%);
  --gradient-accent: linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%);
  --gradient-hero: linear-gradient(135deg, #0F172A 0%, #1E3A8A 50%, #3B82F6 100%);
}

@layer base {
  body {
    font-family: 'Paalalabas Wide', 'Inter', sans-serif;
    color: var(--color-text-primary);
    background: var(--gradient-hero);
    background-attachment: fixed;
    overflow-x: hidden;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Paalalabas Wide', 'Inter', sans-serif;
    font-weight: 700;
    color: var(--color-text-primary);
  }
  
  /* Scrollbar Styling */
  ::-webkit-scrollbar {
    width: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: var(--color-secondary);
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-600);
  }
}

@layer components {
  .btn-primary {
    @apply bg-gradient-to-r from-accent to-accent-secondary text-white font-semibold py-4 px-8 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:scale-105 hover:-translate-y-1 active:scale-95 relative overflow-hidden;
  }
  
  .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
  }
  
  .btn-primary:hover::before {
    left: 100%;
  }
  
  .btn-secondary {
    @apply bg-surface border-2 border-accent text-accent font-semibold py-3 px-6 rounded-xl hover:bg-accent hover:text-white transition-all duration-300 ease-in-out transform hover:scale-105;
  }
  
  .card {
    @apply bg-surface/80 backdrop-blur-sm rounded-2xl shadow-xl border border-surface-light/50 p-6 transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 hover:bg-surface/90;
  }
  
  .card-glow {
    @apply relative overflow-hidden;
  }
  
  .card-glow::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .card-glow:hover::before {
    opacity: 0.03;
  }
  
  .input-field {
    @apply w-full px-4 py-3 border border-surface-light bg-surface/50 backdrop-blur-sm rounded-xl focus:ring-2 focus:ring-accent focus:border-accent transition-all duration-300 ease-in-out text-text-primary placeholder-text-muted;
  }
  
  .section-padding {
    @apply py-20 px-4 sm:px-6 lg:px-8;
  }
  
  .container-max {
    @apply max-w-7xl mx-auto;
  }
  
  .text-gradient {
    @apply bg-gradient-to-r from-accent to-accent-secondary bg-clip-text text-transparent;
  }
  
  .text-gradient-hero {
    @apply bg-gradient-to-r from-text-primary via-accent to-accent-secondary bg-clip-text text-transparent;
  }
  
  .glass-effect {
    @apply bg-surface/20 backdrop-blur-md border border-surface-light/30;
  }
  
  .floating-element {
    animation: float 6s ease-in-out infinite;
  }
  
  .pulse-glow {
    animation: pulse-glow 3s ease-in-out infinite;
  }
  
  .slide-in-left {
    animation: slideInLeft 0.8s ease-out;
  }
  
  .slide-in-right {
    animation: slideInRight 0.8s ease-out;
  }
  
  .fade-in-up {
    animation: fadeInUp 1s ease-out;
  }
  
  .stagger-animation {
    animation: fadeInUp 0.8s ease-out;
  }
  
  .stagger-animation:nth-child(1) { animation-delay: 0.1s; }
  .stagger-animation:nth-child(2) { animation-delay: 0.2s; }
  .stagger-animation:nth-child(3) { animation-delay: 0.3s; }
  .stagger-animation:nth-child(4) { animation-delay: 0.4s; }
}

@layer utilities {
  .transition-250 {
    transition: all 250ms ease-in-out;
  }
  
  .transition-smooth {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .animate-glow {
    animation: glow 2s ease-in-out infinite alternate;
  }
  
  .animate-rotate-slow {
    animation: rotate 10s linear infinite;
  }
  
  .animate-bounce-gentle {
    animation: bounceGentle 3s ease-in-out infinite;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(1deg); }
  50% { transform: translateY(-5px) rotate(-1deg); }
  75% { transform: translateY(-15px) rotate(0.5deg); }
}

@keyframes pulse-glow {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.6), 0 0 60px rgba(6, 182, 212, 0.3);
    transform: scale(1.02);
  }
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeInUp {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes glow {
  0% {
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
  }
  100% {
    text-shadow: 0 0 20px rgba(6, 182, 212, 0.8), 0 0 30px rgba(6, 182, 212, 0.6);
  }
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes bounceGentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Hover Effects */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.hover-glow:hover {
  box-shadow: 0 0 30px rgba(6, 182, 212, 0.4);
}

/* Particle Animation Background */
.particles-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.particle {
  position: absolute;
  background: rgba(6, 182, 212, 0.1);
  border-radius: 50%;
  animation: particle-float 15s infinite linear;
}

@keyframes particle-float {
  0% {
    transform: translateY(100vh) translateX(0px);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-100px) translateX(100px);
    opacity: 0;
  }
}

/* Loading Animation */
.loading-dots {
  display: inline-flex;
  align-items: center;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  margin: 0 2px;
  animation: loading-dots 1.5s infinite ease-in-out;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes loading-dots {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
  40% { transform: scale(1.2); opacity: 1; }
}