style.css

/* ==========================================
# File: styles.css
# Small layer of utilities on top of Tailwind
# ========================================== */

:root { --ring: 2px; }
.nav-link {
  @apply text-sm font-medium text-slate-700 hover:text-primary dark:text-slate-200 dark:hover:text-primary;
}
.mobile-link {
  @apply px-3 py-2 rounded text-slate-700 dark:text-slate-200 hover:bg-slate-200/60 dark:hover:bg-slate-700/40;
}
.btn-primary {
  @apply inline-flex items-center justify-center rounded-lg bg-primary px-5 py-2.5 font-bold text-white shadow hover:opacity-90 focus:outline-none focus-visible:ring-[var(--ring)] focus-visible:ring-primary;
}
.btn-secondary {
  @apply inline-flex items-center justify-center rounded-lg bg-white/15 px-5 py-2.5 font-bold text-white ring-1 ring-white/30 hover:bg-white/25 focus:outline-none focus-visible:ring-[var(--ring)] focus-visible:ring-white;
}
.pill {
  @apply rounded-lg bg-primary/10 dark:bg-primary/20 px-4 py-3 font-semibold text-primary dark:text-white;
}
.h2 { @apply text-3xl sm:text-4xl font-bold tracking-tight; }
.h3 { @apply text-2xl font-bold; }
.h4 { @apply text-xl font-bold; }
.input {
  @apply w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-slate-900 placeholder:text-slate-500 focus:border-primary focus:ring-primary dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100;
}
.label { @apply block text-sm font-medium; }
.link { @apply text-primary hover:underline; }
.link.muted { @apply text-slate-500 hover:text-primary dark:text-slate-400; }
.link-chip { @apply mt-3 inline-flex items-center gap-2 self-start rounded bg-primary/10 px-3 py-1.5 text-sm font-semibold text-primary hover:bg-primary/15; }
.section { @apply py-16 sm:py-24; }
.container { @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8; }

.card {
  @apply flex flex-col gap-2 overflow-hidden rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-6 shadow-soft;
}
.callout {
  @apply rounded-xl border border-primary/30 bg-primary/10 dark:bg-primary/20 p-8;
}

.filter-chip {
  @apply rounded-full px-4 py-2 text-sm font-semibold border border-slate-300 dark:border-slate-600 hover:bg-slate-100 dark:hover:bg-slate-800;
}
.filter-chip.active {
  @apply bg-primary text-white border-primary;
}

.portfolio-card {
  @apply text-left overflow-hidden rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 hover:shadow-lg transition;
}
.portfolio-card img {
  @apply w-full aspect-[4/3] object-cover;
}

.gallery-card { @apply relative overflow-hidden rounded-xl border border-slate-200 dark:border-slate-700 hover:shadow-lg transition; }
.gallery-img { @apply w-full aspect-video object-cover; }
.gallery-caption {
  @apply absolute bottom-0 left-0 right-0 bg-black/50 text-white text-sm px-3 py-2;
}

.th { @apply p-4 text-left font-bold; }
.td-section { @apply p-3 font-bold bg-slate-100 dark:bg-slate-800; }
.td { @apply p-3; }

.quote {
  @apply rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-6 shadow-soft;
}
.about-card {
  @apply p-4 rounded-lg border border-slate-200 dark:border-slate-700 bg-white/70 dark:bg-slate-900/60;
}

.chip {
  @apply inline-flex items-center gap-2 rounded-full border border-slate-300 dark:border-slate-600 px-3 py-1.5 text-sm cursor-pointer select-none;
}
.chip input { @apply sr-only; }
.chip span { @apply inline-block; }
.chip:has(input:checked) { @apply bg-primary text-white border-primary; }

/* Active nav state (scroll spy) */
.nav-link.active { @apply text-primary font-bold; }