/* Petta site - the only genuinely global CSS: design tokens and a resest.
   Everything page-specific (buttons, cards, nav, hero...) lives as a scoped
   <style> block inside the Astro layout/component that actually uses it -
   see src/layouts/ - so it can't leak across pages or collide by class name. */

:root {
  --teal: #65AEA5;
  --dark-teal: #104E63;
  --orange: #F3A654;
  --sage: #99C183;
  --bg: #FBFAF7;
  --bg-alt: #F2F1EA;
  --text: #14231F;
  --muted: #52635F;
  --card: #FFFFFF;
  --card-border: rgba(16, 78, 99, 0.1);
  --ring: rgba(16, 78, 99, 0.12);
  --danger: #C1503D;
  --rule: #E1E6E5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0D1715;
    --bg-alt: #101E1B;
    --text: #EAF1EE;
    --muted: #9FB3AD;
    --card: #142522;
    --card-border: rgba(255, 255, 255, 0.08);
    --ring: rgba(255, 255, 255, 0.1);
    --danger: #E38672;
    --rule: #26383B;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
img { max-width: 100%; }
a { color: inherit; }

/* Keyboard focus was previously invisible everywhere (several elements set
   outline: none). :focus-visible keeps it off for mouse clicks but always
   shows it for keyboard users. */
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Lets a keyboard/screen-reader user jump past the nav straight to content.
   Off-screen until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--dark-teal);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

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