import type { Config } from 'tailwindcss';

/**
 * Tokens mirror DESIGN.md.
 * Forma DJR Micro substitut: Inter (bundled locally via @fontsource-variable/inter).
 */
const config: Config = {
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        // Brand & Accent
        primary: {
          DEFAULT: '#024ad8',
          bright: '#296ef9',
          deep: '#0e3191',
          soft: '#c9e0fc',
        },
        // Surface
        canvas: '#ffffff',
        paper: '#ffffff',
        cloud: '#f7f7f7',
        fog: '#e8e8e8',
        steel: '#c2c2c2',
        hairline: '#e8e8e8',
        // Text
        ink: {
          DEFAULT: '#1a1a1a',
          deep: '#000000',
          soft: '#292929',
          on: '#ffffff',
        },
        charcoal: '#3d3d3d',
        graphite: '#636363',
        // Semantic / decorative
        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)',
      },
      maxWidth: {
        page: '1366px',
      },
    },
  },
  plugins: [],
};

export default config;