| /** @type {import('tailwindcss').Config} */ | |
| export default { | |
| content: ["./index.html", "./src/**/*.{ts,tsx}"], | |
| theme: { | |
| extend: { | |
| // Extra-small breakpoint for narrow phones (iPhone SE is 375px), where a couple of labels | |
| // need to shorten before Tailwind's default `sm` (640px) kicks in. | |
| screens: { | |
| xs: "400px", | |
| }, | |
| fontFamily: { | |
| // Inter — the body/UI face: neutral, modern, highly legible. | |
| sans: [ | |
| "Inter", "ui-sans-serif", "system-ui", "-apple-system", "Segoe UI", | |
| "Roboto", "Helvetica", "Arial", "sans-serif", | |
| ], | |
| // Fraunces — an editorial serif for display headings (font-display class), paired with Inter. | |
| display: ["Fraunces", "ui-serif", "Georgia", "Cambria", "serif"], | |
| }, | |
| colors: { | |
| // Primary: warm tan → coffee brown (buttons, links, active nav, focus, progress, chips). | |
| brand: { | |
| 50: "#f6efe6", | |
| 100: "#ecd9c0", | |
| 200: "#ddc09a", | |
| 300: "#cba272", | |
| 400: "#b9834b", | |
| 500: "#a56c33", | |
| 600: "#875426", | |
| 700: "#6b3f1d", | |
| 800: "#4f2f16", | |
| 900: "#3a2311", | |
| }, | |
| // Neutrals warmed to taupe/sand so surfaces, borders, and text read warm (not cold | |
| // blue-gray). Overrides Tailwind's default `gray`, which the whole app already uses. | |
| gray: { | |
| 50: "#f7f4ef", | |
| 100: "#efe9e0", | |
| 200: "#e3dace", | |
| 300: "#d0c4b3", | |
| 400: "#a79a86", | |
| 500: "#7d7060", | |
| 600: "#5e5445", | |
| 700: "#473f34", | |
| 800: "#2f2a22", | |
| 900: "#211d17", | |
| }, | |
| // A refined dusty denim blue for the "found/unknown" accent — a cool counterpoint to the | |
| // browns, deliberately muted (not the default bright blue). | |
| accent: { | |
| 50: "#eef2f6", | |
| 100: "#d6e2ec", | |
| 500: "#4d7295", | |
| 600: "#3c5c7c", | |
| 700: "#2f4a64", | |
| }, | |
| // Muted forest green — the "working / verified / correct" accent (photo scanner, progress, | |
| // correct-match highlight, license tags). Earthy enough to sit beside the warm browns. | |
| leaf: { | |
| 50: "#eef4ee", | |
| 100: "#d8e8db", | |
| 200: "#b6d3bb", | |
| 300: "#8bb894", | |
| 400: "#5f9d6d", | |
| 500: "#43834f", | |
| 600: "#356540", | |
| 700: "#294f33", | |
| 800: "#1f3b27", | |
| }, | |
| }, | |
| }, | |
| }, | |
| plugins: [], | |
| }; | |