import type { Config } from 'tailwindcss'; /** * Tokens mirror DESIGN.md (terminal-SOC aesthetic, sprint 7). * Inter Variable: body/headers/labels. JetBrains Mono Variable: data cells only. * Dark mode: class-based, toggled by adding 'dark' to . */ const config: Config = { content: ['./index.html', './src/**/*.{ts,tsx}'], darkMode: 'class', theme: { extend: { colors: { // Brand & Accent — primary stays fixed (never inverts) primary: { DEFAULT: '#024ad8', bright: '#296ef9', deep: '#0e3191', soft: '#c9e0fc', }, // Surface — backed by CSS vars so dark mode works via .dark class canvas: 'var(--color-canvas)', paper: 'var(--color-paper)', cloud: 'var(--color-cloud)', fog: 'var(--color-fog)', steel: 'var(--color-steel)', hairline: 'var(--color-hairline)', // Text — also CSS vars ink: { DEFAULT: 'var(--color-ink)', deep: 'var(--color-ink-deep)', soft: 'var(--color-ink-soft)', on: 'var(--color-ink-on)', }, charcoal: 'var(--color-charcoal)', graphite: 'var(--color-graphite)', // Fixed dark slab — never inverts in dark mode slab: '#111827', 'slab-text': '#f9fafb', 'slab-muted': '#6b7280', // Semantic status tokens — light+dark variants via CSS vars success: { DEFAULT: 'var(--color-success)', soft: 'var(--color-success-soft)', }, warn: { DEFAULT: 'var(--color-warn)', soft: 'var(--color-warn-soft)', }, // Semantic / decorative — fixed (not themeable) bloom: { coral: '#ff5050', rose: '#f9d4d2', deep: '#b3262b', wine: '#5a1313', }, storm: { mist: '#8ebdce', sea: '#7fadbe', deep: '#356373', }, }, fontFamily: { sans: ['"Inter Variable"', 'Inter', 'Arial', 'sans-serif'], mono: ['"JetBrains Mono Variable"', '"JetBrains Mono"', 'ui-monospace', 'monospace'], }, fontSize: { // Terminal-SOC display scale — reduced per §0 D9 'display-xxl': ['40px', { lineHeight: '1.1', fontWeight: '500' }], 'display-xl': ['32px', { lineHeight: '1.1', fontWeight: '500' }], 'display-lg': ['28px', { lineHeight: '1.1', fontWeight: '500' }], 'display-md': ['24px', { lineHeight: '1.1', fontWeight: '500' }], 'display-sm': ['20px', { lineHeight: '1.1', fontWeight: '500' }], 'display-xs': ['16px', { lineHeight: '1.1', fontWeight: '600' }], 'body-lg': ['18px', { lineHeight: '1.4', fontWeight: '400' }], 'body-md': ['16px', { lineHeight: '1.4', fontWeight: '400' }], 'body-emphasis': ['16px', { lineHeight: '1.4', fontWeight: '500' }], 'caption-md': ['14px', { lineHeight: '1.5', fontWeight: '400' }], 'caption-bold': ['14px', { lineHeight: '1.3', fontWeight: '700' }], 'caption-sm': ['12px', { lineHeight: '1.33', fontWeight: '400' }], 'link-md': ['16px', { lineHeight: '1.4', fontWeight: '500' }], 'button-md': ['14px', { lineHeight: '1.4', fontWeight: '600' }], 'button-sm': ['12.6px', { lineHeight: '1.0', fontWeight: '700' }], }, spacing: { // Named tokens complement Tailwind defaults xxs: '4px', xs: '8px', sm: '12px', md: '16px', lg: '20px', xl: '24px', xxl: '32px', section: '48px', }, borderRadius: { // Brutalist: 0 everywhere except status pills and avatars none: '0px', pill: '9999px', }, boxShadow: { // Kept in config for backwards compat but no component should apply them 'soft-lift': '0 2px 8px rgba(26, 26, 26, 0.08)', floating: '0 8px 24px rgba(26, 26, 26, 0.12)', 'soft-lift-dark': '0 2px 8px rgba(0, 0, 0, 0.32)', 'floating-dark': '0 8px 24px rgba(0, 0, 0, 0.48)', }, maxWidth: { page: '1366px', }, }, }, plugins: [], }; export default config;