import type { Config } from "tailwindcss";

/*
 * Tokens are shared with site/ — same names, same values, copied verbatim into
 * app/globals.css. Nothing here may hold a hex value: if a colour needs to
 * change it changes in globals.css, in both apps, in one commit.
 *
 * The semantic three are aliased rather than renamed. site/ calls them up,
 * down and pend because it shows monitor state; this app calls them valid,
 * expired and warn because it shows licence state. Same colours, honest names
 * on both sides.
 */
const config: Config = {
    content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
    theme: {
        extend: {
            colors: {
                ground: "var(--ground)",
                panel: "var(--panel)",
                "panel-2": "var(--panel-2)",
                ink: "var(--ink)",
                "ink-2": "var(--ink-2)",
                "ink-3": "var(--ink-3)",
                rule: "var(--rule)",
                "rule-soft": "var(--rule-soft)",
                accent: "var(--accent)",
                "accent-ink": "var(--accent-ink)",
                "accent-wash": "var(--accent-wash)",
                valid: "var(--up)",
                warn: "var(--pend)",
                expired: "var(--down)",
                archival: "var(--ink-3)",
            },
            fontFamily: {
                sans: ["ui-sans-serif", "system-ui", "-apple-system", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"],
                mono: ["ui-monospace", "Cascadia Mono", "SF Mono", "JetBrains Mono", "Menlo", "Consolas", "monospace"],
            },
            // site/ uses 4px on panels and buttons, 2px on focus rings.
            borderRadius: { DEFAULT: "4px" },
            maxWidth: { rail: "1200px" },
        },
    },
    plugins: [],
};

export default config;