import type { Config } from 'tailwindcss'

export default {
  content: [
    './resources/views/**/*.edge',
    './inertia/**/*.vue',
  ],
  theme: {
    extend: {
      colors: {
        'primary': '#3525cd',
        'on-primary': '#ffffff',
        'primary-container': '#4f46e5',
        'on-primary-container': '#dad7ff',
        'secondary': '#565e74',
        'on-secondary': '#ffffff',
        'secondary-container': '#dae2fd',
        'on-secondary-container': '#5c647a',
        'tertiary': '#46494b',
        'on-tertiary': '#ffffff',
        'error': '#ba1a1a',
        'on-error': '#ffffff',
        'error-container': '#ffdad6',
        'on-error-container': '#93000a',
        'background': '#f8f9ff',
        'on-background': '#0b1c30',
        'surface': '#f8f9ff',
        'on-surface': '#0b1c30',
        'surface-variant': '#d3e4fe',
        'on-surface-variant': '#464555',
        'surface-dim': '#cbdbf5',
        'surface-bright': '#f8f9ff',
        'surface-container-lowest': '#ffffff',
        'surface-container-low': '#eff4ff',
        'surface-container': '#e5eeff',
        'surface-container-high': '#dce9ff',
        'surface-container-highest': '#d3e4fe',
        'inverse-surface': '#213145',
        'inverse-on-surface': '#eaf1ff',
        'inverse-primary': '#c3c0ff',
        'outline': '#777587',
        'outline-variant': '#c7c4d8',
        'surface-tint': '#4d44e3',
      },
      fontFamily: {
        'headline-lg': ['Hanken Grotesk'],
        'headline-md': ['Hanken Grotesk'],
        'headline-xl': ['Hanken Grotesk'],
        'body-lg': ['Inter'],
        'body-md': ['Inter'],
        'body-sm': ['Inter'],
        'label-md': ['JetBrains Mono'],
        'label-sm': ['JetBrains Mono'],
      },
      fontSize: {
        'headline-lg': ['28px', { lineHeight: '36px', letterSpacing: '-0.01em', fontWeight: '600' }],
        'headline-md': ['20px', { lineHeight: '28px', fontWeight: '600' }],
        'headline-xl': ['36px', { lineHeight: '44px', letterSpacing: '-0.02em', fontWeight: '700' }],
        'body-lg': ['18px', { lineHeight: '28px', fontWeight: '400' }],
        'body-md': ['16px', { lineHeight: '24px', fontWeight: '400' }],
        'body-sm': ['14px', { lineHeight: '20px', fontWeight: '400' }],
        'label-md': ['14px', { lineHeight: '20px', letterSpacing: '0.02em', fontWeight: '500' }],
        'label-sm': ['12px', { lineHeight: '16px', letterSpacing: '0.05em', fontWeight: '500' }],
      },
      spacing: {
        'sidebar-width': '280px',
      },
    },
  },
  plugins: [],
} satisfies Config