/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        canvas: 'var(--bg-app)',
        panel: {
          DEFAULT: 'var(--bg-panel)',
          elevated: 'var(--bg-panel-elevated)',
          hover: 'var(--bg-panel-hover)',
        },
        surface: {
          DEFAULT: 'var(--bg-panel)',
          elevated: 'var(--bg-panel-elevated)',
          hover: 'var(--bg-panel-hover)',
          border: 'var(--border-color)',
        },
        accent: {
          DEFAULT: 'var(--accent-primary)',
          hover: 'var(--accent-hover)',
          dim: 'var(--accent-dim)',
          border: 'var(--accent-border)',
        },
        brand: {
          DEFAULT: 'var(--accent-primary)',
          hover: 'var(--accent-hover)',
          dark: 'var(--accent-primary)',
        },
      },
      borderColor: {
        DEFAULT: 'var(--border-color)',
        subtle: 'var(--border-subtle)',
      },
      borderRadius: {
        card: 'var(--radius-card)',
        btn: 'var(--radius-btn)',
        input: 'var(--radius-input)',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
      },
    },
  },
  plugins: [],
};