85 lines
2.5 KiB
CSS
85 lines
2.5 KiB
CSS
@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;
|
|
}
|
|
}
|