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

:root {
  /* Primary Colors - Vibrant Blue */
  --color-primary: #168dc7; /* blue-500 */
  --color-primary-50: #eff6ff; /* blue-50 */
  --color-primary-100: #dbeafe; /* blue-100 */
  --color-primary-200: #bfdbfe; /* blue-200 */
  --color-primary-300: #93c5fd; /* blue-300 */
  --color-primary-400: #60a5fa; /* blue-400 */
  --color-primary-500: #3b82f6; /* blue-500 */
  --color-primary-600: #2563eb; /* blue-600 */
  --color-primary-700: #1d4ed8; /* blue-700 */
  --color-primary-800: #1e40af; /* blue-800 */
  --color-primary-900: #1e3a8a; /* blue-900 */

  /* Secondary Colors - Vibrant Indigo */
  --color-secondary: #1f6bb9; /* indigo-500 */
  --color-secondary-50: #eef2ff; /* indigo-50 */
  --color-secondary-100: #e0e7ff; /* indigo-100 */
  --color-secondary-200: #c7d2fe; /* indigo-200 */
  --color-secondary-300: #a5b4fc; /* indigo-300 */
  --color-secondary-400: #818cf8; /* indigo-400 */
  --color-secondary-500: #6366f1; /* indigo-500 */
  --color-secondary-600: #4f46e5; /* indigo-600 */
  --color-secondary-700: #4338ca; /* indigo-700 */
  --color-secondary-800: #3730a3; /* indigo-800 */
  --color-secondary-900: #312e81; /* indigo-900 */

  /* Accent Colors */
  --color-accent: #06B6D4; /* cyan-500 */
  --color-accent-50: #ECFEFF; /* cyan-50 */
  --color-accent-100: #CFFAFE; /* cyan-100 */
  --color-accent-200: #A5F3FC; /* cyan-200 */
  --color-accent-300: #67E8F9; /* cyan-300 */
  --color-accent-400: #22D3EE; /* cyan-400 */
  --color-accent-500: #06B6D4; /* cyan-500 */
  --color-accent-600: #0891B2; /* cyan-600 */
  --color-accent-700: #0E7490; /* cyan-700 */
  --color-accent-800: #155E75; /* cyan-800 */
  --color-accent-900: #164E63; /* cyan-900 */

  /* Background Colors */
  --color-background: #0F172A; /* slate-900 */
  --color-surface: #1E293B; /* slate-800 */
  --color-surface-light: #334155; /* slate-700 */
  --color-surface-lighter: #475569; /* slate-600 */

  /* Text Colors */
  --color-text-primary: #F8FAFC; /* slate-50 */
  --color-text-secondary: #CBD5E1; /* slate-300 */
  --color-text-muted: #94A3B8; /* slate-400 */

  /* Status Colors */
  --color-success: #10B981; /* emerald-500 */
  --color-success-50: #ECFDF5; /* emerald-50 */
  --color-success-100: #D1FAE5; /* emerald-100 */
  --color-success-500: #10B981; /* emerald-500 */
  --color-success-600: #059669; /* emerald-600 */

  --color-warning: #F59E0B; /* amber-500 */
  --color-warning-50: #FFFBEB; /* amber-50 */
  --color-warning-100: #FEF3C7; /* amber-100 */
  --color-warning-500: #F59E0B; /* amber-500 */
  --color-warning-600: #D97706; /* amber-600 */

  --color-error: #EF4444; /* red-500 */
  --color-error-50: #FEF2F2; /* red-50 */
  --color-error-100: #FEE2E2; /* red-100 */
  --color-error-500: #EF4444; /* red-500 */
  --color-error-600: #DC2626; /* red-600 */
}

/* Custom Glassmorphism Utilities */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-card {
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Custom Gradient Backgrounds */
.gradient-primary {
  background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
}

.gradient-hero {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #334155 100%);
}

/* CTA Hover Effects */
.cta-hover {
  transition: all 250ms ease-in-out;
}

.cta-hover:hover {
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
  transform: translateY(-2px);
}

/* Form Focus States */
.form-focus:focus {
  border: 2px solid #6366F1;
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Typewriter Animation */
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

.typewriter {
  overflow: hidden;
  border-right: 2px solid #6366F1;
  white-space: nowrap;
  animation: typewriter 3s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: #6366F1; }
}

/* Scroll Animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 300ms ease-in-out;
}

.fade-in-up.animate {
  opacity: 1;
  transform: translateY(0);
}

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

::-webkit-scrollbar-track {
  background: #1E293B;
}

::-webkit-scrollbar-thumb {
  background: #6366F1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4F46E5;
}