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

@layer base {
  :root {
    --font-inter: 'Inter', system-ui, sans-serif;
  }

  * {
    @apply border-slate-200;
  }

  html {
    @apply scroll-smooth antialiased;
  }

  body {
    @apply bg-surface text-ink font-sans;
  }

  /* Focus ring — consistent, accessible */
  :focus-visible {
    @apply outline-2 outline-offset-2 outline-brand-500 rounded-sm;
  }

  /* Scrollbar */
  ::-webkit-scrollbar        { @apply w-2; }
  ::-webkit-scrollbar-track  { @apply bg-surface-subtle; }
  ::-webkit-scrollbar-thumb  { @apply bg-slate-300 rounded-full; }
  ::-webkit-scrollbar-thumb:hover { @apply bg-slate-400; }
}

@layer components {
  /* ── Buttons ─────────────────────────────────────── */
  .btn {
    @apply inline-flex items-center justify-center gap-2
           font-medium rounded-xl transition-all duration-200
           focus-visible:outline focus-visible:outline-2
           focus-visible:outline-offset-2 disabled:opacity-50
           disabled:pointer-events-none select-none;
  }

  .btn-primary {
    @apply btn px-6 py-3 text-sm
           bg-brand-600 text-white shadow-glow-sm
           hover:bg-brand-700 hover:shadow-glow
           active:scale-[0.98] focus-visible:outline-brand-600;
  }

  .btn-secondary {
    @apply btn px-6 py-3 text-sm
           bg-white text-ink border border-slate-200
           shadow-card hover:bg-surface-subtle hover:border-slate-300
           active:scale-[0.98] focus-visible:outline-brand-500;
  }

  .btn-ghost {
    @apply btn px-4 py-2 text-sm text-ink-muted
           hover:bg-surface-subtle hover:text-ink
           active:scale-[0.98] focus-visible:outline-brand-500;
  }

  /* ── Cards ───────────────────────────────────────── */
  .card {
    @apply bg-white rounded-2xl border border-slate-100
           shadow-card transition-all duration-300;
  }

  .card-hover {
    @apply card hover:shadow-card-hover hover:-translate-y-1;
  }

  /* ── Prose / body text ───────────────────────────── */
  .prose-cms {
    @apply prose prose-slate max-w-none
           prose-headings:font-display prose-headings:text-ink
           prose-a:text-brand-600 prose-a:no-underline
           hover:prose-a:underline
           prose-code:bg-surface-subtle prose-code:rounded
           prose-code:px-1 prose-code:py-0.5;
  }

  /* ── Section ─────────────────────────────────────── */
  .section {
    @apply w-full px-4 sm:px-6 lg:px-8;
  }

  .container-cms {
    @apply max-w-6xl mx-auto;
  }
}

@layer utilities {
  .text-balance  { text-wrap: balance; }
  .text-pretty   { text-wrap: pretty; }
  .animation-delay-100 { animation-delay: 100ms; }
  .animation-delay-200 { animation-delay: 200ms; }
  .animation-delay-300 { animation-delay: 300ms; }
  .animation-delay-400 { animation-delay: 400ms; }
  .animation-delay-500 { animation-delay: 500ms; }
}