module.exports = {
  content: ['./web_platform/index.html', './web_platform/src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      fontSize: {
        xs: ['var(--ui-font-label)', { lineHeight: '1.5' }],
        'ui-body': ['var(--ui-font-body)', { lineHeight: '1.5' }],
      },
      spacing: {
        1: 'var(--ui-space-1)',
        2: 'var(--ui-space-2)',
        3: 'var(--ui-space-3)',
        4: 'var(--ui-space-4)',
        6: 'var(--ui-space-6)',
        control: 'var(--ui-control-height)',
        'hit-compact': 'var(--ui-hit-compact)',
      },
      transitionDuration: { 150: 'var(--ui-duration)' },
      colors: {
        'accent-contrast': 'var(--ui-accent-contrast)',
        app: 'var(--ui-bg)',
        panel: 'var(--ui-panel)',
        'panel-muted': 'var(--ui-panel-muted)',
        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-subtle': 'var(--ui-border-subtle)',
        '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: [],
};