frontend/components/rules/theme.ts

// Theme-aware tokens (defined in globals.css :root / .dark). Inline styles can't
// use Tailwind utilities, so the rules view references the CSS variables directly.
export const ACCENT = 'var(--brand-accent)';
export const SIDEBAR_BG = 'var(--brand-sidebar)';
export const INK = 'var(--brand-ink)';        // emphasis (strong)
export const INK_2 = 'var(--brand-ink-2)';    // body text
export const INK_3 = 'var(--brand-ink-3)';    // h2 headings
export const INK_4 = 'var(--brand-ink-4)';    // h3 subheadings
export const INK_SOFT = 'var(--brand-ink-soft)';
export const INK_FAINT = 'var(--brand-ink-faint)';
export const HAIRLINE = 'var(--border)';