tailwind.config.ts

import type { Config } from "tailwindcss";

/**
 * Tailwind CSS Configuration
 *
 * Brand colors are defined via CSS variables in globals.css,
 * which are sourced from src/styles/design-tokens.ts
 *
 * To change colors, edit PALETTE in design-tokens.ts
 */
const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        // Brand colors from CSS variables (defined in globals.css)
        brand: {
          primary: "hsl(var(--brand-primary) / <alpha-value>)",
          primaryLight: "hsl(var(--brand-primary-light) / <alpha-value>)",
          primaryDark: "hsl(var(--brand-primary-dark) / <alpha-value>)",
          surface: "hsl(var(--brand-surface) / <alpha-value>)",
          surfaceForeground:
            "hsl(var(--brand-surface-foreground) / <alpha-value>)",
          accent: "hsl(var(--brand-accent) / <alpha-value>)",
          accentForeground:
            "hsl(var(--brand-accent-foreground) / <alpha-value>)",
        },
      },
    },
  },
};

export default config;