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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  body {
    /* Digital Ink is the brand palette's default body-copy colour;
       headings, nav and links continue to use Navy explicitly below
       and throughout individual components. */
    @apply bg-white text-ink antialiased;
  }
  h1, h2, h3, h4 {
    @apply font-serif;
  }

  /* Tailwind's Preflight zeroes out border-width on every element, so
     inputs/selects/textareas render with no visible border or background
     unless every single className remembers to add `border` explicitly.
     Styling them once here (instead of the @tailwindcss/forms plugin,
     which would need a new npm install) makes every form field visible
     everywhere, including any new forms added later. Utility classes on
     individual elements (e.g. focus:border-gold-500) still apply on top
     of these defaults. */
  input:not([type='checkbox']):not([type='radio']),
  select,
  textarea {
    @apply w-full rounded-md border border-navy-100 bg-white px-3 py-2 text-sm text-navy-800 shadow-sm;
    @apply placeholder:text-navy-600/50;
    @apply focus:border-gold-500 focus:outline-none focus:ring-2 focus:ring-gold-500/30;
  }

  input[type='checkbox'],
  input[type='radio'] {
    @apply h-4 w-4 rounded border border-navy-100 text-gold-500 focus:ring-gold-500;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-semibold transition-colors duration-150;
  }
  .btn-primary {
    @apply btn bg-gold-500 text-navy-800 hover:bg-gold-600;
  }
  .btn-outline {
    @apply btn border border-white text-white hover:bg-white/10;
  }
  .btn-dark {
    @apply btn bg-navy-700 text-white hover:bg-navy-800;
  }
  .section-title {
    @apply text-3xl font-serif font-semibold text-navy-800 text-center relative;
  }
  .container-page {
    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
  }
  .card {
    @apply rounded-lg border border-navy-100 bg-white shadow-sm;
  }

  /* Shared prose styling for the legal/policy pages (Terms, Privacy,
     Payment/Delivery/Returns, Vendor Agreement) — plain semantic HTML
     (h2/h3/p/ul/table) inside one wrapper, styled once here rather than
     re-adding Tailwind classes to every element on every page. */
  .legal-prose {
    @apply text-sm leading-relaxed text-navy-700;
  }
  .legal-prose > * + * {
    @apply mt-4;
  }
  .legal-prose h2 {
    @apply mt-10 text-xl font-serif font-bold text-navy-800;
  }
  .legal-prose h2:first-child {
    @apply mt-0;
  }
  .legal-prose h3 {
    @apply mt-6 text-base font-serif font-semibold text-navy-800;
  }
  .legal-prose p {
    @apply text-sm text-navy-700;
  }
  .legal-prose ul {
    @apply list-disc space-y-2 pl-5 text-sm text-navy-700;
  }
  .legal-prose ol {
    @apply list-decimal space-y-2 pl-5 text-sm text-navy-700;
  }
  .legal-prose strong {
    @apply font-semibold text-navy-800;
  }
  .legal-prose a {
    @apply font-semibold text-gold-600 hover:text-gold-700;
  }
  .legal-prose table {
    @apply w-full border-collapse overflow-hidden rounded-md border border-navy-100 text-left text-xs;
  }
  .legal-prose th {
    @apply border-b border-navy-100 bg-beige px-3 py-2 font-semibold text-navy-800;
  }
  .legal-prose td {
    @apply border-b border-navy-100 px-3 py-2 align-top text-navy-700;
  }
  .legal-prose tr:last-child td {
    @apply border-b-0;
  }
}