/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        // Dynamic theme colors using CSS custom properties
        'ctp-base': 'var(--color-base)',
        'ctp-mantle': 'var(--color-mantle)',
        'ctp-crust': 'var(--color-crust)',
        'ctp-surface0': 'var(--color-surface0)',
        'ctp-surface1': 'var(--color-surface1)',
        'ctp-surface2': 'var(--color-surface2)',
        'ctp-overlay0': 'var(--color-overlay0)',
        'ctp-overlay1': 'var(--color-overlay1)',
        'ctp-overlay2': 'var(--color-overlay2)',
        'ctp-subtext0': 'var(--color-subtext0)',
        'ctp-subtext1': 'var(--color-subtext1)',
        'ctp-text': 'var(--color-text)',
        'ctp-red': 'var(--color-red)',
        'ctp-green': 'var(--color-green)',
        'ctp-yellow': 'var(--color-yellow)',
        'ctp-blue': 'var(--color-blue)',
        'ctp-pink': 'var(--color-pink)',
        'ctp-teal': 'var(--color-teal)',
        'ctp-lavender': 'var(--color-lavender)',
        'ctp-rosewater': 'var(--color-rosewater)',
      }
    },
  },
  plugins: [],
}