/* Small custom layer for things Tailwind utilities can't express directly.
   Everything else in the app (layout, spacing, color, responsiveness) is
   handled with Tailwind utility classes on the markup itself. */

:root{
  --bg: #FAFBF8;
  --bg-alt: #EEF5F0;
  --ink: #10241d;
  --ink-soft: #4d6259;
  --brand: #006f4c;
  --brand-light: #14a876;
  --deep: #033435;
  --gold: #b9902f;
  --line: rgba(3,52,53,0.12);
}

.gradient-text{
  background:linear-gradient(100deg, var(--deep) 0%, var(--brand) 45%, var(--brand-light) 75%, var(--gold) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}