/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // Base colors using CSS variables
        background: "var(--background)",
        foreground: "var(--foreground)",

        // Surface colors
        surface: {
          primary: "var(--surface-primary)",
          secondary: "var(--surface-secondary)",
          tertiary: "var(--surface-tertiary)",
          modal: "var(--surface-modal)",
          card: "var(--surface-card)",
          hover: "var(--surface-hover)",
          active: "var(--surface-active)",
        },

        // Text colors
        text: {
          primary: "var(--text-primary)",
          secondary: "var(--text-secondary)",
          tertiary: "var(--text-tertiary)",
          inverse: "var(--text-inverse)",
          muted: "var(--text-muted)",
        },

        // Border colors
        border: {
          default: "var(--border-default)",
          hover: "var(--border-hover)",
          focus: "var(--border-focus)",
          divider: "var(--border-divider)",
        },

        // Interactive colors
        interactive: {
          primary: "var(--interactive-primary)",
          "primary-hover": "var(--interactive-primary-hover)",
          secondary: "var(--interactive-secondary)",
          "secondary-hover": "var(--interactive-secondary-hover)",
          danger: "var(--interactive-danger)",
          "danger-hover": "var(--interactive-danger-hover)",
        },

        // Status colors
        status: {
          success: "var(--status-success)",
          warning: "var(--status-warning)",
          error: "var(--status-error)",
          info: "var(--status-info)",
        },
      },
      boxShadow: {
        'custom': 'var(--shadow-default)',
        'custom-hover': 'var(--shadow-hover)',
      },
    },
  },
  plugins: [],
};