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

/* KariGo Branding CSS - Premium Edition */
:root {
  /* KariGo Brand Colors - Premium Palette */
  --karigo-green: #28A745;
  --karigo-orange: #FF8C00;
  --karigo-light-green: #E8F5E9;
  --karigo-gray: #1F2937;
  
  /* Neutral Colors */
  --karigo-bg-light: #F8FAFC;
  --karigo-surface: #FFFFFF;
  --karigo-border: #E2E8F0;
  
  /* Text Colors */
  --karigo-text-primary: #1F2937;
  --karigo-text-secondary: #4B5563;
  --karigo-text-tertiary: #9CA3AF;
  
  /* Shadows */
  --karigo-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --karigo-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --karigo-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --karigo-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* KariGo Color Classes */
.karigo-green { color: var(--karigo-green) !important; }
.karigo-orange { color: var(--karigo-orange) !important; }
.karigo-light-green { color: var(--karigo-light-green) !important; }
.karigo-gray { color: var(--karigo-gray) !important; }

.karigo-bg-green { background-color: var(--karigo-green) !important; }
.karigo-bg-orange { background-color: var(--karigo-orange) !important; }
.karigo-bg-light-green { background-color: var(--karigo-light-green) !important; }
.karigo-bg-gray { background-color: var(--karigo-gray) !important; }
.karigo-bg-light { background-color: var(--karigo-bg-light) !important; }
.karigo-bg-surface { background-color: var(--karigo-surface) !important; }

.karigo-border-green { border-color: var(--karigo-green) !important; }
.karigo-border-orange { border-color: var(--karigo-orange) !important; }
.karigo-border-light-green { border-color: var(--karigo-light-green) !important; }
.karigo-border-gray { border-color: var(--karigo-gray) !important; }

/* KariGo Button Styles */
.btn-karigo-primary {
  background-color: var(--karigo-green) !important;
  color: white !important;
  border: none !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 1rem !important;
  font-weight: 700 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2) !important;
}

.btn-karigo-primary:hover {
  background-color: #218838 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px rgba(40, 167, 69, 0.3) !important;
}

.btn-karigo-orange {
  background-color: var(--karigo-orange) !important;
  color: white !important;
  border: none !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 1rem !important;
  font-weight: 700 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 12px rgba(255, 140, 0, 0.2) !important;
}

.btn-karigo-orange:hover {
  background-color: #e67e00 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px rgba(255, 140, 0, 0.3) !important;
}

.btn-karigo-outline {
  background-color: transparent !important;
  color: var(--karigo-green) !important;
  border: 2px solid var(--karigo-green) !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 1rem !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
}

.btn-karigo-outline:hover {
  background-color: var(--karigo-green) !important;
  color: white !important;
  transform: translateY(-2px) !important;
}

/* KariGo Card Styles */
.card-karigo {
  background-color: var(--karigo-surface) !important;
  border: 1px solid var(--karigo-border) !important;
  border-radius: 1.5rem !important;
  box-shadow: var(--karigo-shadow) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card-karigo:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--karigo-shadow-lg) !important;
}

/* KariGo Form Styles */
.form-input-karigo {
  border: 2px solid var(--karigo-border) !important;
  border-radius: 1rem !important;
  padding: 0.75rem 1.25rem !important;
  background-color: var(--karigo-bg-light) !important;
  transition: all 0.2s ease !important;
  font-weight: 500 !important;
}

.form-input-karigo:focus {
  border-color: var(--karigo-green) !important;
  background-color: white !important;
  box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.1) !important;
  outline: none !important;
}

/* KariGo Badge Styles */
.badge-karigo {
  background-color: var(--karigo-light-green) !important;
  color: var(--karigo-green) !important;
  padding: 0.35rem 1rem !important;
  border-radius: 1rem !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
  animation: fadeInUp 0.4s ease-out forwards;
}

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

::-webkit-scrollbar-track {
  background: var(--karigo-bg-light);
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}