import type { Config } from 'tailwindcss' // darkMode: 'class' permite alternância via classe 'dark' no ou export default { darkMode: 'class', content: ['./index.html', './src/**/*.{ts,tsx}'], theme: { extend: { colors: { // Theme tokens via CSS custom properties (light/dark) canvas: 'var(--color-canvas)', panel: { DEFAULT: 'var(--color-panel)', dark: 'var(--color-panel)', // alias: bg-panel-dark }, surface: { DEFAULT: 'var(--color-surface)', elevated: 'var(--color-surface)', // alias: bg-surface-elevated }, surfaceSecondary: 'var(--color-surface-secondary)', textPrimary: 'var(--color-text-primary)', textSecondary: 'var(--color-text-secondary)', textTertiary: 'var(--color-text-tertiary)', textQuaternary: 'var(--color-text-quaternary)', textMuted: 'var(--color-text-muted)', brand: { DEFAULT: 'rgb(var(--color-brand-ch) / )', indigo: 'rgb(var(--color-brand-ch) / )', // alias: bg-brand-indigo }, accent: { DEFAULT: 'rgb(var(--color-accent-ch) / )', violet: 'rgb(var(--color-accent-ch) / )', // alias: text-accent-violet }, accentHover: 'var(--color-accent-hover)', security: 'var(--color-security)', statusGreen: 'var(--color-status-green)', statusEmerald: 'var(--color-status-emerald)', admin: 'var(--color-admin)', borderSubtle: 'var(--border-subtle)', borderStandard: 'var(--border-standard)', borderPrimary: 'var(--color-border-primary)', borderSecondary: 'var(--color-border-secondary)', borderTertiary: 'var(--color-border-tertiary)', lineTint: 'var(--color-line-tint)', lineTertiary: 'var(--color-line-tertiary)', }, fontFamily: { inter: [ 'Inter Variable', 'Inter', 'SF Pro Display', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'sans-serif', ], mono: [ 'Berkeley Mono', 'ui-monospace', 'SF Mono', 'Menlo', 'monospace', ], sans: [ 'Inter Variable', 'Inter', 'SF Pro Display', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'sans-serif', ], }, fontWeight: { light: '300', normal: '400', medium: '510', semibold: '590', bold: '700', }, letterSpacing: { 'display-xl': '-0.022em', // 72px → -1.584px 'display-lg': '-0.022em', // 64px → -1.408px 'display': '-0.022em', // 48px → -1.056px 'h1': '-0.022em', // 32px → -0.704px 'h2': '-0.012em', // 24px → -0.288px 'h3': '-0.012em', // 20px → -0.24px 'body-lg': '-0.0092em', // 18px → -0.165px 'caption': '-0.01em', // 13px 'tight': '-0.015em', }, borderRadius: { sm: '4px', DEFAULT: '6px', md: '6px', lg: '9px', xl: '12px', }, backdropBlur: { navbar: '12px', }, boxShadow: { 'card': '0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2)', 'card-hover': '0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3)', 'focus': '0 0 0 2px rgba(113,112,255,0.4)', }, }, }, plugins: [], } satisfies Config