module.exports = {
  content: ['./web_platform/index.html', './web_platform/src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        app: 'var(--ui-bg)',
        panel: 'var(--ui-panel)',
        surface: 'var(--ui-surface)',
        'surface-elevated': 'var(--ui-surface-elevated)',
        input: 'var(--ui-input)',
        'element-hover': 'var(--ui-hover)',
        'element-active': 'var(--ui-active)',
        border: 'var(--ui-border)',
        'border-strong': 'var(--ui-border-strong)',
        'text-primary': 'var(--ui-text-primary)',
        'text-secondary': 'var(--ui-text-secondary)',
        'text-tertiary': 'var(--ui-text-tertiary)',
        accent: 'var(--ui-accent)',
        'accent-hover': 'var(--ui-accent-hover)',
        'accent-soft': 'var(--ui-accent-soft)',
        danger: 'var(--ui-danger)',
        'danger-soft': 'var(--ui-danger-soft)',
        'danger-border': 'var(--ui-danger-border)',
        warning: 'var(--ui-warning)',
        'warning-soft': 'var(--ui-warning-soft)',
        'warning-border': 'var(--ui-warning-border)',
        success: 'var(--ui-success)',
        'success-soft': 'var(--ui-success-soft)',
        'success-border': 'var(--ui-success-border)',
      },
    },
  },
  plugins: [],
};