/** @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: [],
};