/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,js,svelte,ts}',
    './src/**/*.{jsx,tsx}',
    // Include component libraries and packages
    '../../packages/**/*.{html,js,svelte,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // Extend with CSS custom properties from our theme system
      colors: {
        // Primary color scale using CSS variables
        primary: {
          50: 'var(--color-primary-50)',
          100: 'var(--color-primary-100)',
          200: 'var(--color-primary-200)',
          300: 'var(--color-primary-300)',
          400: 'var(--color-primary-400)',
          500: 'var(--color-primary-500)',
          600: 'var(--color-primary-600)',
          700: 'var(--color-primary-700)',
          800: 'var(--color-primary-800)',
          900: 'var(--color-primary-900)',
        },
        
        // Surface colors
        surface: {
          background: 'var(--surface-background)',
          foreground: 'var(--surface-foreground)',
          muted: 'var(--surface-muted)',
          border: 'var(--surface-border)',
        },
        
        // Text colors
        text: {
          primary: 'var(--text-primary)',
          secondary: 'var(--text-secondary)',
          muted: 'var(--text-muted)',
          inverse: 'var(--text-inverse)',
        },
        
        // State colors
        state: {
          hover: 'var(--state-hover)',
          active: 'var(--state-active)',
          focus: 'var(--state-focus)',
          disabled: 'var(--state-disabled)',
        },
        
        // Mood colors
        mood: {
          'very-low': 'var(--mood-very-low)',
          'low': 'var(--mood-low)',
          'neutral': 'var(--mood-neutral)',
          'high': 'var(--mood-high)',
          'very-high': 'var(--mood-very-high)',
        },
        
        // Habit colors
        habit: {
          positive: 'var(--habit-positive)',
          negative: 'var(--habit-negative)',
          neutral: 'var(--habit-neutral)',
        },
      },
      
      // Spacing scale using CSS variables
      spacing: {
        '1': 'var(--space-1)',
        '2': 'var(--space-2)',
        '3': 'var(--space-3)',
        '4': 'var(--space-4)',
        '6': 'var(--space-6)',
        '8': 'var(--space-8)',
        '12': 'var(--space-12)',
        '16': 'var(--space-16)',
      },
      
      // Border radius using CSS variables
      borderRadius: {
        'sm': 'var(--radius-sm)',
        'md': 'var(--radius-md)',
        'lg': 'var(--radius-lg)',
        'xl': 'var(--radius-xl)',
        'full': 'var(--radius-full)',
      },
      
      // Box shadows using CSS variables
      boxShadow: {
        'sm': 'var(--shadow-sm)',
        'md': 'var(--shadow-md)',
        'lg': 'var(--shadow-lg)',
        'glow': 'var(--shadow-glow)',
      },
      
      // Animation durations
      transitionDuration: {
        'fast': 'var(--duration-fast)',
        'normal': 'var(--duration-normal)',
        'slow': 'var(--duration-slow)',
      },
      
      // Animation timing functions
      transitionTimingFunction: {
        'ease-in-out': 'var(--ease-in-out)',
      },
      
      // Grid-specific values
      gridTemplateColumns: {
        'grid': 'repeat(auto-fit, minmax(var(--grid-tile-size), 1fr))',
      },
      
      // Typography
      fontFamily: {
        'sans': ['system-ui', '-apple-system', 'Segoe UI', 'Roboto', 'Ubuntu', 'Cantarell', 'Noto Sans', 'sans-serif'],
        'mono': ['ui-monospace', 'SFMono-Regular', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', 'Courier New', 'monospace'],
      },
      
      // Custom animations
      keyframes: {
        'fade-in': {
          'from': { opacity: '0' },
          'to': { opacity: '1' },
        },
        'slide-up': {
          'from': { opacity: '0', transform: 'translateY(1rem)' },
          'to': { opacity: '1', transform: 'translateY(0)' },
        },
        'glow-pulse': {
          '0%, 100%': { boxShadow: 'var(--shadow-glow)' },
          '50%': { boxShadow: '0 0 30px rgba(59, 130, 246, 0.5)' },
        },
      },
      
      animation: {
        'fade-in': 'fade-in var(--duration-normal) var(--ease-in-out)',
        'slide-up': 'slide-up var(--duration-normal) var(--ease-in-out)',
        'glow-pulse': 'glow-pulse 2s ease-in-out infinite',
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    
    // Custom plugin for theme utilities
    function({ addUtilities, addComponents }) {
      // Add theme-aware utilities
      addUtilities({
        '.theme-surface': {
          backgroundColor: 'var(--surface-background)',
          color: 'var(--surface-foreground)',
        },
        '.theme-muted': {
          backgroundColor: 'var(--surface-muted)',
          color: 'var(--text-secondary)',
        },
        '.theme-glow': {
          boxShadow: 'var(--shadow-glow)',
        },
        '.theme-focus': {
          outline: 'var(--grid-focus-ring)',
          outlineOffset: 'var(--grid-focus-offset)',
        },
        '.theme-transition': {
          transition: 'all var(--duration-normal) var(--ease-in-out)',
        },
        '.theme-transition-fast': {
          transition: 'all var(--duration-fast) var(--ease-in-out)',
        },
      });
      
      // Add component classes
      addComponents({
        '.grid-tile': {
          width: 'var(--grid-tile-size)',
          height: 'var(--grid-tile-size)',
          borderRadius: 'var(--grid-tile-radius)',
          border: 'var(--grid-tile-border)',
        },
        '.grid-container': {
          display: 'grid',
          gap: 'var(--grid-tile-gap)',
          gridTemplateColumns: 'repeat(auto-fit, minmax(var(--grid-tile-size), 1fr))',
        },
      });
    },
  ],
  
  // Safelist important classes that might be dynamically generated
  safelist: [
    'theme-surface',
    'theme-muted', 
    'theme-glow',
    'theme-focus',
    'theme-transition',
    'theme-transition-fast',
    'grid-tile',
    'grid-container',
    'animate-fade-in',
    'animate-slide-up',
    'animate-glow-pulse',
  ],
};