import type { Config } from 'tailwindcss'

export default {
  content: [
    './app/components/**/*.vue',
    './app/layouts/**/*.vue',
    './app/pages/**/*.vue',
    './app/composables/**/*.ts',
    './app/app.vue',
  ],
  theme: {
    extend: {
      colors: {
        eu: {
          blue: '#003399',
          'blue-dark': '#002266',
          'blue-light': '#1a4fbd',
          'blue-100': '#e8f0fe',
          'blue-200': '#b3d4fc',
          'blue-300': '#6ba3f7',
          gold: '#FFCC00',
          'gold-dark': '#e6b800',
          'gold-light': '#FFD633',
        },
        surface: {
          DEFAULT: '#ffffff',
          soft: '#f8fafd',
          muted: '#f1f4f9',
          border: '#e2e8f0',
        },
        ink: {
          DEFAULT: '#1a1a2e',
          secondary: '#4a5568',
          muted: '#718096',
          faint: '#a0aec0',
        },
      },
      fontFamily: {
        heading: ['"Instrument Sans"', 'system-ui', 'sans-serif'],
        body: ['"DM Sans"', 'system-ui', 'sans-serif'],
        mono: ['"DM Mono"', 'ui-monospace', 'monospace'],
      },
      fontSize: {
        'display': ['3.5rem', { lineHeight: '1.1', letterSpacing: '-0.02em', fontWeight: '700' }],
        'display-sm': ['2.5rem', { lineHeight: '1.15', letterSpacing: '-0.02em', fontWeight: '700' }],
        'title': ['1.75rem', { lineHeight: '1.25', letterSpacing: '-0.01em', fontWeight: '600' }],
        'subtitle': ['1.25rem', { lineHeight: '1.4', fontWeight: '500' }],
      },
      boxShadow: {
        'soft': '0 1px 3px rgba(0, 51, 153, 0.06), 0 1px 2px rgba(0, 51, 153, 0.04)',
        'card': '0 4px 24px rgba(0, 51, 153, 0.08)',
        'card-hover': '0 8px 40px rgba(0, 51, 153, 0.12)',
        'glow': '0 0 40px rgba(0, 51, 153, 0.15)',
      },
      borderRadius: {
        'xl': '0.875rem',
        '2xl': '1.25rem',
      },
      animation: {
        'fade-up': 'fadeUp 0.6s ease-out forwards',
        'fade-in': 'fadeIn 0.5s ease-out forwards',
        'slide-in': 'slideIn 0.4s ease-out forwards',
      },
      keyframes: {
        fadeUp: {
          '0%': { opacity: '0', transform: 'translateY(24px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideIn: {
          '0%': { opacity: '0', transform: 'translateX(-12px)' },
          '100%': { opacity: '1', transform: 'translateX(0)' },
        },
      },
    },
  },
  plugins: [],
} satisfies Config