/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--n200); border-radius: 3px; }

/* ── Design Tokens ── */
:root {
  /* Brand */
  --brand-900: #052e1e; --brand-800: #0a4a2f; --brand-700: #0f6040;
  --brand-600: #157a52; --brand-500: #1a9463; --brand-400: #22b878;
  --brand-300: #4fd49a; --brand-200: #8eeabf; --brand-100: #c5f4de; --brand-50: #edfaf4;

  /* Neutral */
  --n900: #111827; --n800: #1f2937; --n700: #374151; --n600: #4b5563;
  --n500: #6b7280; --n400: #9ca3af; --n300: #d1d5db; --n200: #e5e7eb;
  --n100: #f3f4f6; --n50: #f9fafb; --white: #ffffff;

  /* Semantic */
  --amber-500: #f59e0b; --amber-100: #fef3c7; --amber-50: #fffbeb;
  --blue-500:  #3b82f6; --blue-100:  #dbeafe; --blue-50:  #eff6ff;
  --red-500:   #ef4444; --red-100:   #fee2e2; --red-50:   #fef2f2;
  --green-500: #10b981; --green-100: #d1fae5; --green-50: #ecfdf5;
  --purple-500:#8b5cf6; --purple-50: #f5f3ff;
  --cyan-500:  #06b6d4; --cyan-50:   #ecfeff;
  --orange-500:#f97316; --orange-50: #fff7ed;
  --pink-500:  #ec4899; --pink-50:   #fdf2f8;
  --yellow-500:#eab308; --yellow-50: #fefce8;

  /* Radii */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-full: 9999px;

  /* Shadows */
  --sh-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sh-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);

  /* Transitions */
  --tr:   180ms cubic-bezier(.4,0,.2,1);
  --tr-s: 320ms cubic-bezier(.4,0,.2,1);
}

/* ── Base ── */
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--n800);
  background: var(--n50);
  min-height: 100vh;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}