/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
      },
      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)',
      },
      boxShadow: {
        'card': '0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.03)',
        'card-hover': '0 4px 12px 0 rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04)',
        'elevated': '0 8px 24px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.06)',
      },
      borderRadius: {
        'xl': '0.875rem',
        '2xl': '1rem',
      },
    },
  },
  plugins: [],
}