import animate from 'tailwindcss-animate';

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: ['class', '[data-theme="dark"]'],
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        // Every colour resolves through a CSS variable so the user's chosen
        // accent re-tints the whole interface without a rebuild.
        bg: 'hsl(var(--bg))',
        background: 'hsl(var(--bg))',
        surface: 'hsl(var(--surface))',
        'surface-2': 'hsl(var(--surface-2))',
        border: 'hsl(var(--border))',
        input: 'hsl(var(--border))',
        ring: 'hsl(var(--accent))',
        fg: 'hsl(var(--fg))',
        foreground: 'hsl(var(--fg))',
        muted: 'hsl(var(--muted))',
        'muted-foreground': 'hsl(var(--muted))',
        accent: 'hsl(var(--accent))',
        'accent-foreground': 'hsl(var(--accent-on))',
        'accent-fg': 'hsl(var(--accent-fg))',
        'accent-on': 'hsl(var(--accent-on))',
        'accent-subtle': 'hsl(var(--accent-subtle))',
        primary: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-on))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--surface-2))',
          foreground: 'hsl(var(--fg))',
        },
        card: {
          DEFAULT: 'hsl(var(--surface))',
          foreground: 'hsl(var(--fg))',
        },
        popover: {
          DEFAULT: 'hsl(var(--surface))',
          foreground: 'hsl(var(--fg))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--danger))',
          foreground: 'hsl(0 0% 100%)',
        },
        positive: 'hsl(var(--positive))',
        warning: 'hsl(var(--warning))',
        danger: 'hsl(var(--danger))',
        info: 'hsl(var(--info))',
      },
      fontFamily: {
        sans: ['ui-sans-serif', 'system-ui', '-apple-system', 'Segoe UI', 'Inter', 'sans-serif'],
        mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],
      },
      borderRadius: { lg: '0.75rem', xl: '1rem' },
    },
  },
  plugins: [animate],
};