/* Custom fonts - imported before Tailwind */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

@import "tailwindcss";

/* CSS Variables for theming */
@theme {
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  
  /* Primary colors - Modern Green theme (webklar.com style) */
  --color-primary-50: #f0fdf4;
  --color-primary-100: #dcfce7;
  --color-primary-200: #bbf7d0;
  --color-primary-300: #86efac;
  --color-primary-400: #4ade80;
  --color-primary-500: #22c55e;
  --color-primary-600: #16a34a;
  --color-primary-700: #15803d;
  --color-primary-800: #166534;
  --color-primary-900: #14532d;
  
  /* Accent colors - Modern Green/Emerald */
  --color-accent-400: #34d399;
  --color-accent-500: #10b981;
  --color-accent-600: #059669;
  
  /* Neutral/Slate colors */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
}

/* Base styles */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Improve touch scrolling on mobile */
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

/* Improve touch targets on mobile */
@media (max-width: 640px) {
  button, a, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Better tap highlighting */
  * {
    -webkit-tap-highlight-color: rgba(34, 197, 94, 0.1);
  }
}

/* Touch manipulation for better performance */
.touch-manipulation {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Selection styling */
::selection {
  background-color: var(--color-primary-200);
  color: var(--color-primary-900);
}

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

::-webkit-scrollbar-track {
  background: var(--color-slate-100);
}

::-webkit-scrollbar-thumb {
  background: var(--color-slate-300);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-slate-400);
}

/* Gradient backgrounds */
.gradient-hero {
  background: linear-gradient(135deg, var(--color-slate-900) 0%, var(--color-primary-900) 50%, var(--color-slate-800) 100%);
}

.gradient-mesh {
  background-image: 
    radial-gradient(at 40% 20%, var(--color-primary-500) 0px, transparent 50%),
    radial-gradient(at 80% 0%, var(--color-accent-500) 0px, transparent 50%),
    radial-gradient(at 0% 50%, var(--color-primary-700) 0px, transparent 50%),
    radial-gradient(at 80% 50%, var(--color-accent-400) 0px, transparent 50%),
    radial-gradient(at 0% 100%, var(--color-primary-600) 0px, transparent 50%);
}

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

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); }
  50% { box-shadow: 0 0 40px rgba(34, 197, 94, 0.6); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

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

/* Stagger animation delays */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
