@import "tailwindcss";
@import "basecoat-css/nova";

@layer base {
  html {
    scroll-behavior: smooth;
  }
}

@layer components {
  .hub-shell {
    @apply min-h-screen bg-background text-foreground;
    background-image:
      radial-gradient(ellipse at top, color-mix(in oklab, var(--primary) 8%, transparent), transparent 55%),
      radial-gradient(ellipse at bottom right, color-mix(in oklab, var(--chart-2) 6%, transparent), transparent 45%);
  }

  .hub-container {
    @apply mx-auto max-w-6xl px-4 sm:px-6;
  }

  .hub-glass-header {
    @apply sticky top-0 z-40 border-b border-border/60 bg-background/80 backdrop-blur-xl backdrop-saturate-150;
  }

  .hub-hero {
    @apply relative overflow-hidden rounded-3xl border border-primary/20 bg-gradient-to-br from-primary via-primary to-[color-mix(in_oklab,var(--primary)_70%,var(--chart-2))] p-6 text-primary-foreground shadow-lg sm:p-8;
  }

  .hub-hero::before {
    content: "";
    @apply pointer-events-none absolute -right-16 -top-16 h-48 w-48 rounded-full bg-white/10 blur-2xl;
  }

  .hub-hero::after {
    content: "";
    @apply pointer-events-none absolute -bottom-20 left-1/4 h-40 w-40 rounded-full bg-white/10 blur-3xl;
  }

  /* Outline buttons use light-theme foreground; restyle on the dark hero banner. */
  .hub-hero .btn[data-variant="outline"] {
    @apply border-primary-foreground/50 bg-primary-foreground/10 text-primary-foreground shadow-none hover:bg-primary-foreground/20 hover:text-primary-foreground;
  }

  .hub-vote {
    @apply flex min-w-[3.25rem] flex-col items-center justify-center gap-0.5;
  }

  .hub-post-card {
    @apply transition duration-200 hover:-translate-y-0.5 hover:shadow-md;
  }

  .hub-kanban-planned {
    @apply border-t-4 border-t-sky-400;
  }

  .hub-kanban-progress {
    @apply border-t-4 border-t-amber-400;
  }

  .hub-kanban-done {
    @apply border-t-4 border-t-emerald-400;
  }

  .markdown-body img {
    @apply my-4 max-w-full rounded-lg border border-border;
  }

  .markdown-body :where(p, ul, ol, pre, blockquote):not(:last-child) {
    @apply mb-4;
  }

  .markdown-body :where(h1, h2, h3, h4):not(:last-child) {
    @apply mb-3 mt-6 font-semibold;
  }
}