/* styles.css — lightweight additions over Tailwind CDN (no @apply) */
/* Color tokens come from inline <style> in header.php via CSS variables */
:root {
  /* fallback values in case header.php wasn't loaded first */
  --bg: #fff7fb; --fg: #1b1b1f; --muted: #6b7280; --primary: #f472b6; --accent: #10b981;
}

html { color-scheme: light; }
body { background: var(--bg); color: var(--fg); font-size: 16px; line-height: 1.6; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0.9rem; padding: 0.5rem 1rem; font-weight: 500;
  transition: transform 200ms ease, opacity 200ms ease, filter 200ms ease;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.btn-primary {
  background: var(--primary); color: #fff; border: 1px solid rgba(0,0,0,.06);
}
.btn-primary:hover { filter: brightness(.97); }

.btn-ghost {
  background: transparent; color: color-mix(in srgb, var(--fg) 80%, transparent);
  border: 1px solid rgba(0,0,0,.06);
}
.btn-ghost:hover { color: var(--fg); }

/* Nav links */
.nav-link {
  color: color-mix(in srgb, var(--fg) 80%, transparent);
  text-decoration: none; transition: color 200ms ease, opacity 200ms ease;
}
.nav-link:hover, .nav-link:focus { color: var(--fg); text-decoration: underline; }

/* Card */
.card {
  border-radius: 1.25rem; border: 1px solid rgba(0,0,0,.05);
  background: color-mix(in srgb, #fff 70%, transparent);
  box-shadow: 0 10px 25px rgba(0,0,0,.05);
  backdrop-filter: saturate(120%) blur(6px);
}

/* Accessibility */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: .25rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Images */
img { max-width: 100%; height: auto; }
img.rounded-xl { border-radius: 0.75rem; }

/* Animations – respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Print */
@media print {
  a { text-decoration: underline; }
  .btn, .nav, header, footer { box-shadow: none !important; }
}

/* Simple utility if you want to hide scrollbars on decorative containers */
.is-decorative { pointer-events: none; user-select: none; }