import type { Config } from 'tailwindcss'

const config: Config = {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: '#000000',
        secondary: '#0051d5',
        'border-subtle': '#E2E8F0',
        'success-green': '#10B981',
        'error-red': '#EF4444',
        'info-blue': '#3B82F6',
        'warning-amber': '#F59E0B',
        background: '#f7f9fb',
        'surface-white': '#FFFFFF',
        'surface-container': '#eceef0',
        'surface-container-high': '#e6e8ea',
        'surface-container-highest': '#e0e3e5',
        'surface-container-low': '#f2f4f6',
        'on-surface': '#191c1e',
        'on-surface-variant': '#45464d',
        'on-secondary': '#ffffff',
        'on-primary': '#ffffff',
        outline: '#76777d',
        'outline-variant': '#c6c6cd',
      },
      fontSize: {
        'headline-sm': ['20px', { lineHeight: '28px', fontWeight: '600' }],
        'headline-md': ['24px', { lineHeight: '32px', fontWeight: '600' }],
        'headline-lg': ['32px', { lineHeight: '40px', fontWeight: '600' }],
        'display-lg': ['48px', { lineHeight: '1.1', fontWeight: '700' }],
        'body-sm': ['14px', { lineHeight: '20px' }],
        'body-md': ['16px', { lineHeight: '24px' }],
        'body-lg': ['18px', { lineHeight: '28px' }],
        'label-sm': ['12px', { lineHeight: '16px', letterSpacing: '0.02em', fontWeight: '500' }],
        'label-md': ['14px', { lineHeight: '16px', letterSpacing: '0.01em', fontWeight: '600' }],
      },
    },
  },
  plugins: [],
}

export default config