:root {
  --color-primary-1: #1d903e;   /* emerald-600 */
  --color-primary-2: #ffc932;   /* amber-400 */
  --color-secondary-1: #1f5932; /* emerald-800 */
  --color-secondary-2: #ffb334; /* amber-500 */
}


html { scroll-behavior: smooth; }
body { background: #ffffff; color: #111827; }


.prose h2, .prose h3 { color: var(--color-primary-1); }
.prose a { color: var(--color-primary-1); text-decoration: none; }
.prose a:hover { text-decoration: underline; }


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: transform .05s ease, background-color .2s ease, color .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-secondary {
  background-color: var(--color-primary-2);
  color: #111827;
}
.btn-secondary:hover {
  background-color: var(--color-secondary-2);
}


.card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  transform: translateY(-2px);
}


@media (min-width: 1024px) {
  main { padding-top: 0; }
}


body { padding-bottom: 64px; }
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
}


a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--color-primary-2);
  outline-offset: 2px;
}