export default {
  content: ['./src/frontend/**/*.{html,js,jsx,ts,tsx}'],
  darkMode: 'media',
  theme: {
    extend: {
      colors: {
        accent: 'rgb(var(--accent) / <alpha-value>)',
        'accent-hover': 'rgb(var(--accent-hover) / <alpha-value>)',
        surface: 'rgb(var(--surface) / <alpha-value>)',
        border: 'rgb(var(--border) / <alpha-value>)',
        ring: 'rgb(var(--ring) / <alpha-value>)',
        glow: 'rgb(var(--glow) / <alpha-value>)',
      },
      borderRadius: {
        '2xl': '1rem',
      },
      boxShadow: {
        fluent: '0 8px 32px rgba(0,0,0,0.25)',
        glow: '0 0 20px rgba(59,130,246,0.3)',
        'glow-lg': '0 0 40px rgba(59,130,246,0.4)',
      },
      fontSize: {
        base: ['clamp(1rem,0.9rem+0.2vw,1.125rem)', { lineHeight: '1.5' }],
      },
    },
  },
  plugins: [],
};