@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html, body, #root { height: 100%; }
  body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  ::selection { background-color: theme('colors.brand.500'); color: white; }
}

@layer components {
  .card { @apply rounded-xl border border-ink-800 bg-ink-900 shadow-card; }
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-lg px-3.5 py-2 text-sm font-medium
           transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500/40 focus:ring-offset-2 focus:ring-offset-ink-950
           disabled:cursor-not-allowed disabled:opacity-50;
  }
  .btn-primary   { @apply btn bg-brand-500 text-white hover:bg-brand-400 active:bg-brand-600; }
  .btn-secondary { @apply btn bg-ink-800 text-ink-100 hover:bg-ink-700 border border-ink-700; }
  .btn-ghost     { @apply btn bg-transparent text-ink-200 hover:bg-ink-800; }
  .input {
    @apply w-full rounded-lg border border-ink-700 bg-ink-900 px-3 py-2 text-sm text-ink-100
           placeholder:text-ink-400 focus:border-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500/30;
  }
  .label { @apply text-xs font-medium uppercase tracking-wide text-ink-300; }
  .badge {
    @apply inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider;
  }
  .badge-admin   { @apply badge bg-brand-500/15 text-brand-200; }
  .badge-junior  { @apply badge bg-warn/15 text-warn; }
  .badge-neutral { @apply badge bg-ink-800 text-ink-200; }

  /* Photo grid — Pinterest-style masonry via CSS columns. column-count
     stays responsive; column-gap matches the gap between cards. Each
     card needs break-inside: avoid so a tall image doesn't get sliced. */
  .photo-grid { @apply gap-3; column-count: 2; column-gap: 0.75rem; }
  @screen sm { .photo-grid { column-count: 3; } }
  @screen lg { .photo-grid { column-count: 4; } }
  @screen xl { .photo-grid { column-count: 5; } }
  .photo-grid > * { @apply mb-3; break-inside: avoid; display: inline-block; width: 100%; }
}