/* Small hand-written touches that are awkward to express with Tailwind utility
   classes alone. Everything else in this project uses Tailwind via CDN. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.font-display {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
}

.font-mono-data {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* Signature "meal-plan grid" texture used behind the hero + slot pickers */
.plate-grid {
  background-image:
    linear-gradient(to right, rgba(31, 77, 58, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31, 77, 58, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

::selection {
  background-color: #E8783E;
  color: #FAF7F0;
}

.focus-ring:focus-visible {
  outline: 2px solid #1F4D3A;
  outline-offset: 2px;
}