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 <html>.
 */
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',
      },
      maxWidth: {
        page: '1366px',
      },
    },
  },
  plugins: [],
};

export default config;
