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

:root {
  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
}

@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }
  body {
    @apply bg-cream text-navy font-sans antialiased;
    text-rendering: optimizeLegibility;
  }
  ::selection {
    background-color: rgba(217, 164, 65, 0.35);
    color: #0b1f3a;
  }
  h1,
  h2,
  h3 {
    @apply font-display;
    letter-spacing: -0.01em;
  }
  /* Respect users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    [data-reveal] {
      opacity: 1 !important;
      transform: none !important;
    }
  }
}

@layer components {
  .container-px {
    @apply mx-auto w-full max-w-7xl px-5 sm:px-8 lg:px-10;
  }

  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-full font-semibold transition-all duration-200 focus:outline-none focus-visible:ring-4 disabled:opacity-60;
  }
  .btn-lg {
    @apply px-7 py-4 text-base;
  }
  .btn-md {
    @apply px-5 py-3 text-sm;
  }
  .btn-gold {
    @apply bg-gold text-navy shadow-gold hover:bg-gold-600 focus-visible:ring-gold/40 active:translate-y-px;
  }
  .btn-navy {
    @apply bg-navy text-cream hover:bg-navy-700 focus-visible:ring-navy/30 active:translate-y-px;
  }
  .btn-ghost-navy {
    @apply border border-navy/20 bg-white/60 text-navy hover:border-navy/40 hover:bg-white focus-visible:ring-navy/20;
  }
  .btn-ghost-light {
    @apply border border-white/25 bg-white/5 text-cream hover:bg-white/10 focus-visible:ring-white/30;
  }

  .eyebrow {
    @apply inline-flex items-center gap-2 rounded-full border border-navy/10 bg-white/70 px-3.5 py-1.5 text-xs font-semibold uppercase tracking-wider text-navy-700;
  }
  .eyebrow-dark {
    @apply inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3.5 py-1.5 text-xs font-semibold uppercase tracking-wider text-cream/80;
  }

  .card {
    @apply rounded-3xl border border-navy/[0.06] bg-white shadow-card;
  }

  /* Status pills used in the readiness snapshot */
  .pill {
    @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold;
  }
  .pill-ready {
    @apply bg-emerald-50 text-emerald-700;
  }
  .pill-gather {
    @apply bg-gold-50 text-gold-700;
  }
  .pill-attorney {
    @apply bg-danger-50 text-danger-700;
  }
}

@layer utilities {
  /* Subtle paper grain for warmth without images */
  .grain {
    position: relative;
  }
  .grain::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  }
  .text-balance {
    text-wrap: balance;
  }
}