Milestone 3

frontend/tailwind.config.ts

@@ -0,0 +1,66 @@
+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;