:root {
  --color-bg: 255 255 255;
  --color-text: 17 24 39;
  --color-muted: 107 114 128;
  --color-border: 229 231 235;
  --color-accent: 59 130 246;
}

.bg-bg { background-color: rgb(var(--color-bg)); }
.text-text { color: rgb(var(--color-text)); }
.text-muted { color: rgb(var(--color-muted)); }
.border-border { border-color: rgb(var(--color-border)); }
.btn { @apply px-3 py-1.5 rounded-md border border-border hover:-translate-y-0.5 hover:shadow-sm transition active:translate-y-0; }
.btn-accent { @apply px-3 py-1.5 rounded-md bg-blue-600 text-white hover:bg-blue-500 transition; }
.nav-link { @apply text-sm text-muted hover:text-text transition; }
.link-muted { @apply text-muted hover:text-text transition; }
.section-title { @apply text-xl font-semibold; }

/* Lightbox */
#lightbox.show { opacity: 1; pointer-events: auto; }

/* Typography (fallback when not using Tailwind Typography) */
.prose h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; }
.prose h2 { font-size: 1.25rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.5rem; }
.prose p { line-height: 1.75; color: rgb(var(--color-text)); margin: 0.5rem 0; }
.prose ul { list-style: disc; padding-left: 1.25rem; }
.prose li { margin: 0.25rem 0; }

/* Home hero background */
.home-hero {
  position: relative;
  background-image: url('https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=1600&auto=format&fit=crop&q=60');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(2, 8, 23, 0.6), rgba(2, 8, 23, 0.25));
}