/* Libre Baskerville — display / headings */
@import '@fontsource/libre-baskerville/400.css';
@import '@fontsource/libre-baskerville/400-italic.css';
@import '@fontsource/libre-baskerville/700.css';

/* Mulish — body / UI */
@import '@fontsource/mulish/300.css';
@import '@fontsource/mulish/400.css';
@import '@fontsource/mulish/500.css';
@import '@fontsource/mulish/600.css';
@import '@fontsource/mulish/700.css';

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

@layer base {
  html {
    @apply scroll-smooth;
    font-feature-settings: 'kern' 1, 'liga' 1;
  }

  body {
    @apply bg-bg text-text font-sans antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-display;
  }

  /* Focus ring — olive gold */
  :focus-visible {
    outline: 2px solid #C4973A;
    outline-offset: 2px;
    border-radius: 2px;
  }
}

@layer components {
  /* Section layout */
  .container-x {
    @apply mx-auto max-w-6xl px-5 sm:px-8 lg:px-12;
  }

  .section-gap {
    @apply py-20 sm:py-28;
  }

  /* Gold accent rule */
  .gold-rule {
    @apply block w-12 h-px bg-accent mb-6;
  }

  /* Section label */
  .label-sm {
    @apply text-xs font-sans font-semibold uppercase tracking-widest text-accent;
  }

  /* Primary CTA button — dark text on gold bg for WCAG AA */
  .btn-primary {
    @apply inline-flex items-center gap-2 px-7 py-3.5 rounded-sm text-sm font-sans font-semibold tracking-wide transition-colors;
    background-color: #C4973A;
    color: #1A1A13;
  }
  .btn-primary:hover {
    background-color: #A87C2A;
    color: #1A1A13;
  }

  /* Ghost button */
  .btn-ghost {
    @apply inline-flex items-center gap-2 px-7 py-3.5 rounded-sm text-sm font-sans font-semibold tracking-wide border border-accent text-accent transition-colors hover:bg-accent;
  }
  .btn-ghost:hover {
    color: #1A1A13;
  }

  /* Form inputs */
  .form-input {
    @apply w-full px-4 py-3 rounded-sm border border-border bg-surface-light text-text placeholder-text-faint text-sm font-sans transition-colors;
  }
  .form-input:focus {
    @apply outline-none border-accent;
  }

  /* Card */
  .card {
    @apply bg-surface border border-border rounded-sm;
  }

  /* Menu tab button — active state */
  .tab-active {
    border-bottom: 2px solid #C4973A;
    color: #C4973A;
  }

  /* Menu item price */
  .price {
    @apply font-sans font-semibold text-accent text-sm;
  }
}

/* Scroll-reveal animation — reduced motion respects OS preference */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
}
