import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
  ],
  darkMode: ["class"],
  theme: {
    extend: {
      fontFamily: {
        mono: ["var(--font-mono)", "ui-monospace", "Cascadia Code", "Source Code Pro", "monospace"],
        sans: ["var(--font-sans)", "ui-sans-serif", "system-ui", "-apple-system", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"],
      },
      // Semantic tokens — defined as CSS custom properties in app/globals.css on
      // :root (light) and .dark (dark). Components must use these names, never a
      // raw gray-9xx, so a theme is one variable block rather than an override sheet.
      colors: {
        page:        "var(--page)",
        surface:     "var(--surface)",
        raised:      "var(--raised)",
        line:        "var(--line)",
        "line-strong": "var(--line-strong)",
        ink: {
          DEFAULT: "var(--ink)",
          2:       "var(--ink-2)",
          muted:   "var(--ink-muted)",
        },
        accent:         "var(--accent)",
        "sev-moderate": "var(--sev-moderate)",
        "sev-major":    "var(--sev-major)",
        "map-bg":    "var(--map-bg)",
        "map-block": "var(--map-block)",
        "map-road":  "var(--map-road)",
        "map-water": "var(--map-water)",
      },
      // Marketing/product type scale — used by the (marketing) surface and
      // settings shell so headings read as a deliberate hierarchy rather than
      // ad-hoc text-xl/text-2xl bumps.
      fontSize: {
        "display-lg": ["3.5rem", { lineHeight: "1.05", letterSpacing: "-0.02em", fontWeight: "700" }],
        "display": ["2.75rem", { lineHeight: "1.1", letterSpacing: "-0.02em", fontWeight: "700" }],
        "display-sm": ["2.125rem", { lineHeight: "1.15", letterSpacing: "-0.01em", fontWeight: "700" }],
      },
      boxShadow: {
        card: "0 1px 2px 0 rgb(0 0 0 / 0.4), 0 1px 3px 0 rgb(0 0 0 / 0.3)",
        "card-hover": "0 4px 12px 0 rgb(0 0 0 / 0.45), 0 2px 4px 0 rgb(0 0 0 / 0.3)",
        glow: "0 0 0 1px rgb(99 102 241 / 0.4), 0 0 24px 0 rgb(99 102 241 / 0.25)",
      },
      animation: {
        "fade-in": "fade-in 0.4s ease-out",
        "slide-up": "slide-up 0.4s ease-out",
      },
      keyframes: {
        "fade-in": { from: { opacity: "0" }, to: { opacity: "1" } },
        "slide-up": { from: { opacity: "0", transform: "translateY(8px)" }, to: { opacity: "1", transform: "translateY(0)" } },
      },
    },
  },
  plugins: [],
};

export default config;