@import "tailwindcss";

/* ─────────────────────────────────────────────────────────────────────────
 * Theme — Food Co-op Initiative palette
 *
 * "leaf" is the primary green. Inspired by the warm, grassroots-organic
 * feel of fci.coop: not corporate teal, not jewel-toned. A balanced
 * field-green that sits comfortably alongside warm cream/stone neutrals.
 *
 * "stone" is the neutral ramp — slightly warm, never icy.
 *
 * Both are built as Tailwind 4 color tokens, so utility classes like
 * `bg-leaf-700`, `text-stone-600` work everywhere.
 * ─────────────────────────────────────────────────────────────────────── */

@theme {
  --font-sans: var(--font-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: var(--font-serif), ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  --color-leaf-50: #f3f8f0;
  --color-leaf-100: #e3eed9;
  --color-leaf-200: #c8dcb3;
  --color-leaf-300: #a3c280;
  --color-leaf-400: #7ea455;
  --color-leaf-500: #5e8638;
  --color-leaf-600: #4a6c2a;
  --color-leaf-700: #3a5520;
  --color-leaf-800: #2c401a;
  --color-leaf-900: #1f2d12;

  --color-stone-50: #fafaf7;
  --color-stone-100: #f3f2ed;
  --color-stone-200: #e7e4dc;
  --color-stone-300: #d4cfc1;
  --color-stone-400: #aaa494;
  --color-stone-500: #807a6a;
  --color-stone-600: #5b574b;
  --color-stone-700: #403d35;
  --color-stone-800: #2a2823;
  --color-stone-900: #1a1815;
}

/* Base / reset */
:root {
  color-scheme: light;
  --background: var(--color-stone-50);
  --foreground: var(--color-stone-900);
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--background);
  color: var(--foreground);
}

/* Larger, more readable form controls on small screens */
input,
select,
textarea,
button {
  font: inherit;
}

/* Ensure focus is always perceptible (in addition to Tailwind's ring) */
*:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Make Chrome's date input chevron less garish */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.6;
  cursor: pointer;
}

/* Prevent layout shift when the sticky submit bar appears */
@media (min-width: 640px) {
  main {
    padding-bottom: 5rem;
  }
}