import type { Config } from 'tailwindcss'; /** * Tokens mirror DESIGN.md. * Forma DJR Micro substitut: Inter (bundled locally via @fontsource-variable/inter). * 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 (HP Electric Blue 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 (utility strip, footer, dark bands) slab: '#111827', 'slab-hover': '#1f2937', 'slab-text': '#f9fafb', 'slab-muted': '#6b7280', // 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'], }, fontSize: { // DESIGN.md typography scale 'display-xxl': ['72px', { lineHeight: '1.0', fontWeight: '500' }], 'display-xl': ['56px', { lineHeight: '1.0', fontWeight: '500' }], 'display-lg': ['44px', { lineHeight: '1.0', fontWeight: '500' }], 'display-md': ['32px', { lineHeight: '1.0', fontWeight: '500' }], 'display-sm': ['24px', { lineHeight: '1.17', fontWeight: '500' }], 'display-xs': ['20px', { lineHeight: '1.0', fontWeight: '500' }], 'body-lg': ['18px', { lineHeight: '1.33', fontWeight: '400' }], 'body-md': ['16px', { lineHeight: '1.38', fontWeight: '400' }], 'body-emphasis': ['16px', { lineHeight: '1.38', 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.38', fontWeight: '500' }], 'button-md': ['14px', { lineHeight: '1.4', fontWeight: '600', letterSpacing: '0.7px' }], }, spacing: { // DESIGN.md spacing tokens (named, complement Tailwind defaults) xxs: '4px', xs: '8px', sm: '12px', md: '16px', lg: '20px', xl: '24px', xxl: '32px', section: '80px', }, borderRadius: { // DESIGN.md radius tokens none: '0px', xs: '2px', sm: '3px', md: '4px', lg: '8px', xl: '16px', pill: '9999px', }, boxShadow: { '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;