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 <html>.
 */
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-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;
