const plugin = require('tailwindcss/plugin');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
    './src/**/*.{html,ts,css}'
  ],
  darkMode: ['class', '[data-theme="dark"]'],
  theme: {
    extend: {
      colors: {
        'bg-main': 'var(--bg-main)',
        'bg-muted': 'var(--bg-muted)',
        card: 'var(--card)',
        elevated: 'var(--elevated)',
        'text-main': 'var(--text-main)',
        'text-muted': 'var(--text-muted)',
        border: 'var(--border)',
        brand: 'var(--brand)',
        'brand-700': 'var(--brand-700)',
        'brand-800': 'var(--brand-800)',
        accent: 'var(--accent)',
        success: 'var(--success)',
        warning: 'var(--warning)',
        danger: 'var(--danger)',
        info: 'var(--info)',
        ring: 'var(--ring)'
      },
      ringColor: {
        DEFAULT: 'var(--ring)'
      },
      boxShadow: {
        surface: '0 1px 2px 0 var(--shadow-color)',
        'surface-md': '0 12px 32px -16px var(--shadow-color)',
        focus: '0 0 0 var(--focus-ring-size) var(--ring)'
      },
      borderRadius: {
        sm: 'var(--radius-sm)',
        DEFAULT: 'var(--radius-md)',
        md: 'var(--radius-md)',
        lg: 'var(--radius-lg)',
        xl: 'var(--radius-xl)',
        '2xl': 'calc(var(--radius-xl) + 0.5rem)',
        full: 'var(--radius-full)'
      },
      fontFamily: {
        sans: ['var(--font-sans)', 'system-ui', 'sans-serif'],
        mono: ['var(--font-mono)', 'ui-monospace', 'SFMono-Regular', 'monospace']
      },
      transitionTimingFunction: {
        base: 'var(--transition-base)',
        fast: 'var(--transition-fast)',
        slow: 'var(--transition-slow)'
      }
    }
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    plugin(({ addVariant }) => {
      addVariant('theme-dark', ':is([data-theme="dark"] &)');
    })
  ]
};