/* Tailwind v4 entry */
@import "tailwindcss";

/* Tell Tailwind where to scan */
@source "./templates/**/*.html";
@source "./app.py";

/* Base */
:root { --bg: #0a0a0a; }
html, body { background: var(--bg); }
.font-bebas { font-family: "Bebas Neue", ui-sans-serif, system-ui; }

/* Custom utilities */
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
}
.mask-fade {
  -webkit-mask-image: linear-gradient(to bottom, black, rgba(0,0,0,.85) 40%, transparent 80%);
  mask-image: linear-gradient(to bottom, black, rgba(0,0,0,.85) 40%, transparent 80%);
}
.glass {
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.dot { display: inline-flex; align-items: center; gap: .5rem; }
.dot::before {
  content: "";
  width: .5rem; height: .5rem; border-radius: 9999px;
  background: rgb(52 211 153);
}

/* Components (no @apply of custom classes) */
.btn-primary {
  @apply inline-flex items-center justify-center rounded-xl bg-white text-black font-semibold transition;
  /* padding utilities in @apply are fine too; using raw CSS keeps it simple */
  padding: 0.75rem 1.25rem; /* = py-3 px-5 */
}
.btn-ghost {
  @apply inline-flex items-center justify-center rounded-xl font-semibold transition;
  /* bring 'glass' styles in directly */
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 0.75rem 1.25rem;
}
.label { @apply text-sm text-white/70; }
.input,
.textarea {
  @apply w-full mt-1 border border-white/10 rounded-xl px-4 py-3 outline-none focus:border-white/30;
  background: rgba(255,255,255,.05);
}
.link { @apply underline underline-offset-4 hover:no-underline; }

/* Cards */
.card {
  @apply rounded-2xl p-6;
  /* include glass effect here too */
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.card-title { @apply font-semibold text-lg; }
.card-body  { @apply mt-2 text-sm text-white/80; }
.card-list  { @apply mt-4 space-y-2 text-sm text-white/70 list-disc pl-4; }