@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 relative flex !h-auto min-h-[50px] w-11 shrink-0 flex-col items-center justify-center gap-1 rounded-xl border border-border/80 bg-background/80 px-1 py-2 text-center text-xs font-bold text-muted-foreground shadow-2xs backdrop-blur-xs transition-all duration-150 hover:border-primary/60 hover:bg-muted/60 hover:text-foreground active:scale-95 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 select-none;
  }

  .hub-vote:hover svg {
    transform: translateY(-2px);
  }

  .hub-vote svg {
    transition: transform 0.15s ease;
  }

  .hub-vote.is-voted,
  .hub-vote[data-voted="true"] {
    @apply border-primary/90 bg-primary/10 text-primary shadow-xs hover:border-primary hover:bg-primary/15 hover:text-primary dark:bg-primary/20;
  }

  .hub-vote.is-voted svg,
  .hub-vote[data-voted="true"] svg {
    @apply text-primary stroke-primary;
  }

  .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;
  }

  .markdown-body a {
    @apply text-primary underline underline-offset-2;
  }

  .markdown-body ul {
    @apply list-disc pl-6;
  }

  .markdown-body ol {
    @apply list-decimal pl-6;
  }

  .markdown-body blockquote {
    @apply border-l-4 border-border pl-4 text-muted-foreground;
  }

  .markdown-body code {
    @apply rounded-md bg-muted px-1.5 py-0.5 font-mono text-[0.9em];
  }

  .markdown-body pre {
    @apply overflow-x-auto rounded-lg bg-muted p-4;
  }

  .markdown-body pre code {
    @apply bg-transparent p-0;
  }

  .markdown-body hr {
    @apply my-6 border-border;
  }
}