/**
 * FoodAR — shared base styles.
 * Tailwind (loaded via CDN on each page) handles layout utilities; this
 * file only holds what Tailwind's utility classes can't express cleanly:
 * CSS custom properties, focus states, and the one orchestrated motion
 * moment on the landing page.
 */

:root {
  --color-warmwhite: #FAF8F5;
  --color-beige: #EDE6DA;
  --color-muted: #8B8680;
  --color-charcoal: #2B2825;
  --color-olive: #6B7052;
}

html,
body {
  background-color: var(--color-warmwhite);
  color: var(--color-charcoal);
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.font-display {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 40;
}

/* Visible keyboard focus on every interactive element, everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-olive);
  outline-offset: 2px;
}

.divider-line {
  height: 1px;
  background: rgba(43, 40, 37, 0.12);
}

/* The single orchestrated entrance moment on the landing page. */
.hero-fade-in {
  animation: foodar-fade-up 700ms ease-out both;
}

@keyframes foodar-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fade-in {
    animation: none;
  }
}