import type { Config } from 'tailwindcss';

/**
 * Design tokens from `tasks/design.md` — Red Team Operations Map.
 * Dark, flat, terminal-inspired. Color-as-taxonomy: each accent maps to a category.
 */
export default {
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        // Surfaces
        bg: '#0a0e1a',
        'bg-card': '#111827',
        border: '#1e2d3d',
        // Text
        text: '#94a3b8',
        'text-bright': '#f8fafc',
        'text-dim': '#64748b',
        'text-comment': '#475569',
        // Accent palette (each one means a category — see tasks/design.md §2)
        red: '#ef4444',
        orange: '#f59e0b',
        yellow: '#eab308',
        green: '#10b981',
        cyan: '#06b6d4',
        blue: '#3b82f6',
        purple: '#8b5cf6',
        pink: '#ec4899',
        rose: '#f43f5e',
        teal: '#14b8a6',
      },
      fontFamily: {
        mono: ['"JetBrains Mono"', 'ui-monospace', 'SFMono-Regular', 'monospace'],
        sans: ['"IBM Plex Sans"', 'ui-sans-serif', 'system-ui', 'sans-serif'],
      },
      fontSize: {
        // Custom scale matching design.md §3 — extends the default Tailwind ramp.
        // 2xs = arrow labels (8px), 3xs = tag/pill (9px), 4xs = card sub-label, flow node, inline code (10px).
        // 11px (pre/footer), 12px (body/section desc), 13/14px (card title), 18px (section h2),
        // and 28px (page h1) all already exist in the default ramp.
        '2xs': ['8px', '1.4'],
        '3xs': ['9px', '1.4'],
        '4xs': ['10px', '1.4'],
      },
      borderRadius: {
        sm: '3px',
        DEFAULT: '4px',
        md: '6px',
        lg: '10px',
      },
      maxWidth: {
        page: '1400px',
      },
      letterSpacing: {
        wider2: '1px',
      },
    },
  },
  // Safelist accent classes used dynamically (tag categories, flow nodes).
  safelist: [
    { pattern: /^(border|text|bg)-(red|orange|yellow|green|cyan|blue|purple|pink|rose|teal)$/ },
    { pattern: /^(border|text|bg)-(red|orange|yellow|green|cyan|blue|purple|pink|rose|teal)\/(\d+)$/ },
  ],
  plugins: [],
} satisfies Config;