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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
@layer utilities {
  .bg-grid-white {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='white' stroke-width='0.5' stroke-opacity='0.12'/%3E%3C/svg%3E");
  }

  .bg-grid-dark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%2316211c' stroke-width='0.5' stroke-opacity='0.04'/%3E%3C/svg%3E");
  }
}

@layer components {
  mux-player {
    @apply rounded-lg overflow-hidden;
  }

  .trix-content {
    @apply text-gray-900;
  }

  .trix-content h1 {
    @apply text-2xl font-bold mb-4;
  }

  .trix-content ul {
    @apply list-disc list-inside mb-4;
  }

  .trix-content ol {
    @apply list-decimal list-inside mb-4;
  }

  .trix-content li {
    @apply mb-2;
  }

  .trix-content blockquote {
    @apply border-l-4 border-gray-300 pl-4 my-4 italic;
  }

  .trix-content a {
    @apply text-blue-600 hover:text-blue-800 underline;
  }
}

/* =====================================================================
   MARKETING — Slice-style: warm greige canvas (bg-paper), heavy black
   display type, mono uppercase kickers, hairline-bordered panels with a
   hard offset emerald shadow, graph-paper sections, one dark band.
   ONE accent: emerald (the Yaff brand). Ink is the single neutral.
   ===================================================================== */
@layer components {
  .mk-kicker { @apply font-mono text-xs uppercase tracking-[0.25em] text-emerald-700; }
  .mk-kicker-muted { @apply font-mono text-xs uppercase tracking-[0.25em] text-ink/50; }
  .mk-h1 { @apply text-5xl sm:text-6xl md:text-[5rem] font-black leading-[0.98] tracking-tight text-ink; }
  .mk-h2 { @apply text-3xl md:text-4xl font-black tracking-tight text-ink; }
  .mk-lede { @apply text-lg text-ink/60 leading-relaxed; }
  .mk-body { @apply text-ink/60 leading-relaxed; }

  .mk-section { @apply border-t border-ink/15; }
  .mk-container { @apply mx-auto max-w-6xl px-4 sm:px-6; }

  /* Raised panel with the hard offset shadow; -lg for hero/product shots */
  .mk-card { @apply rounded-2xl border border-ink/20 bg-white shadow-[4px_4px_0_rgba(16,185,129,0.22)]; }
  .mk-card-lg { @apply rounded-2xl border border-ink/20 bg-white shadow-[8px_8px_0_rgba(16,185,129,0.22)]; }
  /* Flat bordered panel, for grids of cells (use divide-ink/10 inside) */
  .mk-panel { @apply rounded-2xl border border-ink/20 bg-white overflow-hidden; }

  .mk-btn-primary { @apply inline-flex items-center justify-center gap-2 rounded-full bg-emerald-600 px-8 py-3.5 text-sm font-semibold text-white transition-colors hover:bg-emerald-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-paper; }
  .mk-btn-secondary { @apply inline-flex items-center justify-center gap-2 rounded-full border border-ink/25 bg-white px-8 py-3.5 text-sm font-semibold text-ink transition-colors hover:bg-paper-raised; }
  .mk-btn-dark { @apply inline-flex items-center justify-center gap-2 rounded-full bg-ink px-8 py-3.5 text-sm font-semibold text-white transition-colors hover:bg-ink/85; }

  .mk-pill { @apply inline-flex items-center gap-1.5 rounded-full border border-ink/15 bg-white px-3 py-1 font-mono text-[11px] uppercase tracking-wider text-ink/60; }
  .mk-check { @apply text-emerald-600 font-bold; }
  .mk-link { @apply hover:text-ink hover:underline underline-offset-4; }

  /* Graph paper (sits under "how it works" style sections) */
  .mk-grid-paper {
    background-image:
      linear-gradient(to right, rgba(16, 185, 129, 0.08) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(16, 185, 129, 0.08) 1px, transparent 1px);
    background-size: 2rem 2rem;
  }
  /* The one dark band per page (manifesto / final pitch) */
  .mk-dark-band { @apply bg-[#0f1f18] text-white; }

  /* FAQ accordion (<details>) */
  .mk-faq { @apply divide-y divide-ink/10 rounded-2xl border border-ink/20 bg-white; }
  .mk-faq > details { @apply px-6 py-4; }
  .mk-faq summary { @apply flex cursor-pointer list-none items-center justify-between gap-4 font-semibold text-ink; }
  .mk-faq summary::-webkit-details-marker { display: none; }

  /* Long-form marketing copy (legal, about, blog, help) */
  .mk-prose { @apply prose prose-lg max-w-none prose-headings:font-black prose-headings:tracking-tight prose-headings:text-ink prose-p:text-ink/70 prose-li:text-ink/70 prose-a:text-emerald-700 prose-strong:text-ink; }
}

/* =====================================================================
   SHOP — creator pages, Fan Town-style: dark-first and cinematic, the
   creator's artwork is the interface. ONE accent: the creator's
   primary_color (rgb in --accent-rgb, set in layouts/shop), used for the
   primary action and active states, never decoration.
   ===================================================================== */
@layer components {
  .shop-container { @apply mx-auto w-full max-w-[1180px] px-4 sm:px-6 lg:px-8; }

  /* Section heading: small caps label with a hairline */
  .shop-section-head { @apply mb-4 flex items-baseline justify-between gap-3 border-b border-night-border pb-2; }
  .shop-section-title { @apply m-0 text-xs font-semibold uppercase tracking-[0.12em] text-night-soft; }
  .shop-section-more { @apply text-xs uppercase tracking-[0.06em] text-night-muted transition-colors hover:text-night-text; }

  .shop-title { @apply font-serif font-semibold tracking-tight text-night-text; }

  .shop-btn { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full border border-night-strong bg-night-surface px-5 py-2.5 text-sm font-semibold text-night-text transition-colors hover:bg-night-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent; }
  .shop-btn-primary { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full bg-accent px-5 py-2.5 text-sm font-semibold text-white shadow-[0_8px_24px_-8px_rgb(var(--accent-rgb)/0.6)] transition hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-night; }
  .shop-btn-ghost { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full px-4 py-2.5 text-sm font-semibold text-night-soft transition-colors hover:bg-white/5 hover:text-night-text; }

  .shop-card { @apply rounded-2xl border border-night-border bg-night-raised; }
  .shop-card-hover { @apply transition-colors hover:border-night-strong hover:bg-night-surface; }
  .shop-pill { @apply inline-flex items-center gap-1 rounded-full border border-night-border bg-night-surface px-2.5 py-0.5 text-xs font-medium text-night-soft; }
  .shop-badge-accent { @apply inline-flex items-center gap-1 rounded-full bg-accent/15 px-2.5 py-0.5 text-xs font-semibold text-accent; }
  .shop-empty { @apply rounded-2xl border border-dashed border-night-strong px-6 py-10 text-center text-sm text-night-muted; }

  /* Forms on dark */
  .shop-label { @apply mb-1.5 block text-sm font-medium text-night-soft; }
  .shop-input { @apply block w-full rounded-xl border border-night-strong bg-night-surface px-3.5 py-2.5 text-sm text-night-text placeholder:text-night-muted focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/40; }

  /* Creator-written long form (bios, posts, ebook blurbs) */
  .shop-prose { @apply prose prose-lg prose-invert max-w-none prose-p:text-night-soft prose-li:text-night-soft prose-headings:font-serif prose-headings:text-night-text prose-a:text-accent prose-strong:text-night-text prose-blockquote:border-night-strong; }

  /* Rich text on dark (ActionText) */
  .shop-dark .trix-content { @apply text-night-soft; }
  .shop-dark .trix-content a { @apply text-accent hover:text-accent/80; }
  .shop-dark .trix-content blockquote { @apply border-night-strong; }
  .shop-dark mux-player { --media-background-color: #000; }

  /* Horizontal scroll rows: hide the scrollbar */
  .shop-scroll-row { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
  .shop-scroll-row::-webkit-scrollbar { display: none; }
}

/* Turbo keeps <html> across navigations, so a shop/marketing page reached from
   another layout (e.g. the admin, or the iOS app's tabs) would otherwise show
   that layout's canvas colour below the content and in overscroll bounce. */
html:has(> body.shop-dark) { background-color: #0b0c10; }
html:has(> body.bg-paper) { background-color: #f2f1ec; }