/* CSS Variables for consistent colors */
:root {
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-300: #a5b4fc;
  --primary-400: #818cf8;
  --primary-500: #6366f1;
  --primary-600: #4f46e5;
  --primary-700: #4338ca;
  --primary-800: #3730a3;
  --primary-900: #312e81;
  
  --secondary-50: #f5f3ff;
  --secondary-100: #ede9fe;
  --secondary-200: #ddd6fe;
  --secondary-300: #c4b5fd;
  --secondary-400: #a78bfa;
  --secondary-500: #8b5cf6;
  --secondary-600: #7c3aed;
  --secondary-700: #6d28d9;
  --secondary-800: #5b21b6;
  --secondary-900: #4c1d95;
  
  --accent-50: #eff6ff;
  --accent-100: #dbeafe;
  --accent-200: #bfdbfe;
  --accent-300: #93c5fd;
  --accent-400: #60a5fa;
  --accent-500: #3b82f6;
  --accent-600: #2563eb;
  --accent-700: #1d4ed8;
  --accent-800: #1e40af;
  --accent-900: #1e3a8a;
}

/* Inter font */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  src: local('Inter Thin'), local('Inter-Thin'),
       url('/assets/fonts/Inter/Inter-Thin.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  src: local('Inter ExtraLight'), local('Inter-ExtraLight'),
       url('/assets/fonts/Inter/Inter-ExtraLight.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: local('Inter Light'), local('Inter-Light'),
       url('/assets/fonts/Inter/Inter-Light.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: local('Inter Regular'), local('Inter-Regular'),
       url('/assets/fonts/Inter/Inter-Regular.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: local('Inter Medium'), local('Inter-Medium'),
       url('/assets/fonts/Inter/Inter-Medium.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: local('Inter SemiBold'), local('Inter-SemiBold'),
       url('/assets/fonts/Inter/Inter-SemiBold.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: local('Inter Bold'), local('Inter-Bold'),
       url('/assets/fonts/Inter/Inter-Bold.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: local('Inter ExtraBold'), local('Inter-ExtraBold'),
       url('/assets/fonts/Inter/Inter-ExtraBold.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: local('Inter Black'), local('Inter-Black'),
       url('/assets/fonts/Inter/Inter-Black.ttf') format('truetype');
  font-display: swap;
}

/* Apply Inter to everything */
body, html, * {
  font-family: 'Inter', sans-serif !important;
  font-optical-sizing: auto;
  /*font-weight: 600;*/
  font-style: 300;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0px;
}

/* Enhanced styling */
.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.primary-gradient {
  background-image: linear-gradient(to right, var(--primary-600), var(--secondary-600));
}

.accent-gradient {
  background-image: linear-gradient(to right, var(--accent-600), var(--primary-600));
}

/* Animated elements */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

/* Enhanced buttons */
.btn-primary {
  background-image: linear-gradient(to right, var(--primary-600), var(--secondary-600));
  color: white;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.6);
}

.btn-secondary {
  background-image: linear-gradient(to right, var(--accent-600), var(--primary-600));
  color: white;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
}