/** @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)',
        },
        input: 'var(--bg-input)',
        overlay: 'var(--bg-overlay)',
        code: 'var(--bg-code)',
        main: 'var(--text-main)',
        muted: 'var(--text-muted)',
        faint: 'var(--text-faint)',
        'on-accent': 'var(--text-on-accent)',
        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)',
        },
        status: {
          ok: 'var(--color-success)',
          'ok-bg': 'var(--bg-success)',
          'ok-border': 'var(--border-success)',
          err: 'var(--color-danger)',
          'err-bg': 'var(--bg-danger)',
          'err-border': 'var(--border-danger)',
          warn: 'var(--color-warning)',
          'warn-bg': 'var(--bg-warning)',
          'warn-border': 'var(--border-warning)',
        },
        border: 'var(--border-color)',
      },
      borderColor: {
        DEFAULT: 'var(--border-color)',
        border: 'var(--border-color)',
        subtle: 'var(--border-subtle)',
        strong: 'var(--border-strong)',
      },
      borderRadius: {
        card: 'var(--radius-card)',
        btn: 'var(--radius-btn)',
        input: 'var(--radius-input)',
        checkbox: 'var(--radius-checkbox)',
        pill: 'var(--radius-pill)',
      },
      boxShadow: {
        panel: 'var(--shadow-panel)',
      },
      fontFamily: {
        sans: [
          'Inter',
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          'Segoe UI',
          'Roboto',
          'sans-serif',
        ],
        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
      },
    },
  },
  plugins: [],
};