/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // Semantic surface tokens
        surface: {
          DEFAULT: 'var(--color-bg-surface)',
          alt: 'var(--color-bg-app)',
          hover: 'var(--color-bg-surface-hover)',
          muted: 'var(--color-bg-muted)',
        },
        // Semantic text tokens
        content: {
          DEFAULT: 'var(--color-text)',
          secondary: 'var(--color-text-secondary)',
          muted: 'var(--color-text-muted)',
          inverse: 'var(--color-text-inverse)',
        },
        // Border tokens
        'border-default': 'var(--color-border)',
        'border-light': 'var(--color-border-light)',
        // Accent tokens
        accent: {
          DEFAULT: 'var(--color-accent)',
          hover: 'var(--color-accent-hover)',
          light: 'var(--color-accent-light)',
          text: 'var(--color-accent-text)',
        },
        // Status tokens
        'status-success': {
          bg: 'var(--color-status-success-bg)',
          text: 'var(--color-status-success-text)',
        },
        'status-warning': {
          bg: 'var(--color-status-warning-bg)',
          text: 'var(--color-status-warning-text)',
        },
        'status-error': {
          bg: 'var(--color-status-error-bg)',
          text: 'var(--color-status-error-text)',
        },
        'status-info': {
          bg: 'var(--color-status-info-bg)',
          text: 'var(--color-status-info-text)',
        },
      },
      borderColor: {
        DEFAULT: 'var(--color-border)',
      },
      ringColor: {
        accent: 'var(--color-accent)',
      },
    },
  },
  plugins: [],
}