import type { Config } from "tailwindcss";

const tok = (name: string) =>
  `color-mix(in srgb, var(--${name}) calc(<alpha-value> * 100%), transparent)`;

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.
      // Wrapped in color-mix so opacity modifiers (bg-surface/90, bg-accent/15)
      // work — a bare var() hex gives Tailwind nothing to apply alpha to, and the
      // class silently generates no rule (map overlays rendered see-through).
      colors: {
        page:          tok("page"),
        surface:       tok("surface"),
        raised:        tok("raised"),
        line:          tok("line"),
        "line-strong": tok("line-strong"),
        ink: {
          DEFAULT: tok("ink"),
          2:       tok("ink-2"),
          muted:   tok("ink-muted"),
        },
        accent:         tok("accent"),
        "sev-moderate": tok("sev-moderate"),
        "sev-major":    tok("sev-major"),
        "map-bg":    tok("map-bg"),
        "map-block": tok("map-block"),
        "map-road":  tok("map-road"),
        "map-water": tok("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;