import type { Config } from "tailwindcss";

// Bind the Airbnb design system tokens into Tailwind so utility
// classes (e.g. bg-surface, text-fg, border-hairline) map to the
// CSS custom properties declared in globals.css. We do NOT hardcode
// hex into Tailwind — values resolve from var(--*).
const config: Config = {
  content: [
    "./app/**/*.{ts,tsx,mdx}",
    "./components/**/*.{ts,tsx,mdx}",
    "./lib/**/*.{ts,tsx,mdx}"
  ],
  theme: {
    extend: {
      colors: {
        bg: "var(--bg)",
        surface: "var(--surface)",
        "surface-warm": "var(--surface-warm)",
        fg: "var(--fg)",
        "fg-2": "var(--fg-2)",
        muted: "var(--muted)",
        meta: "var(--meta)",
        border: "var(--border)",
        "border-soft": "var(--border-soft)",
        accent: "var(--accent)",
        "accent-hover": "var(--accent-hover)",
        "accent-active": "var(--accent-active)",
        success: "var(--success)",
        warn: "var(--warn)",
        danger: "var(--danger)"
      },
      fontFamily: {
        sans: [
          "Airbnb Cereal VF",
          "Airbnb Cereal App",
          "Circular",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        mono: [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "Monaco",
          "Consolas",
          "monospace"
        ]
      },
      borderRadius: {
        sm: "var(--radius-sm)",
        md: "var(--radius-md)",
        lg: "var(--radius-lg)",
        pill: "9999px"
      },
      boxShadow: {
        raised: "var(--elev-raised)",
        ring: "0 0 0 1px var(--border)"
      },
      maxWidth: {
        container: "1280px"
      }
    }
  },
  plugins: []
};

export default config;