@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

:root {
  --font-sans: 'Inter', sans-serif;
  --font-display: 'Outfit', sans-serif;
  
  /* Modern Agency Forest-Green theme */
  --primary-color-50: #f0fdf4;
  --primary-color-100: #dcfce7;
  --primary-color-200: #bbf7d0;
  --primary-color-500: #10b981;
  --primary-color-600: #059669;
  --primary-color-700: #047857;
  --primary-color-900: #064e3b;
  
  --neutral-50: #f9fafb;
  --neutral-100: #f3f4f6;
  --neutral-200: #e5e7eb;
  --neutral-300: #d1d5db;
  --neutral-400: #9ca3af;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-800: #1f2937;
  --neutral-900: #111827;
}

body {
  font-family: var(--font-sans);
  background-color: #fafbfc;
  color: var(--neutral-800);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* Custom Scrollbar for premium code viewers & sections */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-400);
}

/* Premium Card Transitions */
.premium-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: #ffffff;
  border: 1px solid rgba(229, 231, 235, 0.8);
}
.premium-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.04), 0 4px 12px -2px rgba(0, 0, 0, 0.02);
  border-color: var(--primary-color-200);
}

/* Custom Accordion smooth heights */
.accordion-content {
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

/* Button Status Highlights */
.status-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.status-btn-yes.active {
  background-color: var(--primary-color-600);
  color: white;
  border-color: var(--primary-color-700);
  box-shadow: 0 4px 12px -4px rgba(5, 150, 105, 0.4);
}

.status-btn-no.active {
  background-color: #ef4444;
  color: white;
  border-color: #dc2626;
  box-shadow: 0 4px 12px -4px rgba(239, 68, 68, 0.4);
}

.status-btn-pending.active {
  background-color: #f59e0b;
  color: white;
  border-color: #d97706;
  box-shadow: 0 4px 12px -4px rgba(245, 158, 11, 0.4);
}

/* Input Fields Accent Styling */
.form-input-premium {
  border: 1px solid var(--neutral-200);
  transition: all 0.2s ease;
  background-color: #ffffff;
}
.form-input-premium:focus {
  border-color: var(--primary-color-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
  outline: none;
}

/* Live JSON panel layout and code formatting */
.json-live-panel {
  font-family: 'Consolas', 'Fira Code', 'Courier New', monospace;
  font-size: 0.825rem;
  line-height: 1.5;
  background-color: #0f172a;
  color: #38bdf8;
}
.json-key { color: #f472b6; }
.json-string { color: #34d399; }
.json-number { color: #fb7185; }
.json-boolean { color: #38bdf8; }
.json-null { color: #94a3b8; }

/* Micro-animations and loaders */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .7; transform: scale(0.98); }
}
.pulse-soft {
  animation: pulse-soft 2s infinite ease-in-out;
}

@keyframes slide-in-bottom {
  0% { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.slide-in-bottom {
  animation: slide-in-bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom Circular Progress Bar using SVG dasharray */
.radial-progress-svg {
  transform: rotate(-90deg);
}
.radial-progress-bg {
  stroke: var(--neutral-100);
}
.radial-progress-fill {
  stroke: var(--primary-color-500);
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom styled switches or check grids */
.checklist-item-pill {
  transition: all 0.2s ease;
}
.checklist-item-pill.active {
  background-color: var(--primary-color-50);
  border-color: var(--primary-color-500);
  color: var(--primary-color-900);
}