:root {
  --color-primary: #059669;
  --color-primary-dark: #047857;
  --color-accent: #f59e0b;
}

* { scroll-behavior: smooth; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Headings */
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; }

nav a, nav button, button, .badge, .label,
span[class*="font-medium"], span[class*="font-semibold"] {
  font-family: 'Poppins', sans-serif;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #059669, #10b981); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #047857, #059669); }

::selection { background: #059669; color: white; }

/* Line clamp utility */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== ANIMATIONS ===== */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(1deg); }
  50% { transform: translateY(-20px) rotate(0deg); }
  75% { transform: translateY(-10px) rotate(-1deg); }
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ===== ANIMATION CLASSES ===== */
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-slide-up { animation: slideInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-fade-in { animation: fadeIn 1s ease-out forwards; }
.animate-fadeIn { animation: fadeIn 1s ease-out forwards; }

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
}
.animate-gradient-shift {
  animation: gradient-shift 4s ease infinite;
}

/* ===== DELAY UTILITIES ===== */
.delay-75 { animation-delay: 75ms; }
.delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-1000 { animation-delay: 1000ms; }

/* ===== UNDERLINE EFFECT ===== */
.underline-effect { position: relative; }
.underline-effect::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #059669, #10b981);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.underline-effect:hover::after { width: 100%; }

/* ===== FOCUS ===== */
*:focus-visible { outline: 2px solid #059669; outline-offset: 2px; }

/* Form field styling (matches React Field component) */
.form-field {
  width: 100%;
  padding: 0.625rem 1rem;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  outline: none;
  transition: all 0.2s;
  color: #111827;
  background: #f9fafb;
  font-size: 0.95rem;
}
.form-field::placeholder { color: #9ca3af; }
.form-field:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16,185,129,0.2);
  background: #fff;
}