/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: {
          // 브랜드 통일: 앱(Midnight Glass) blue 토큰과 동일 값 — 레거시 amber 폐기
          blue: '#3b82f6',
          'blue-light': '#60a5fa',
          'blue-dark': '#2563eb',
          'blue-glow': 'rgba(59,130,246,0.5)',
          'blue-dim': 'rgba(59,130,246,0.14)',
          'blue-muted': 'rgba(59,130,246,0.08)',
        },
        surface: {
          950: '#08090c',
          900: '#0d0f14',
          800: '#13161f',
          700: '#1a1e2b',
          600: '#222838',
          500: '#2b3245',
          400: '#363f57',
          300: '#434d69',
          200: '#535f7f',
          100: '#68769c',
        },
        neutral: {
          50: '#ffffff',
          100: '#f4f4f5',
          200: '#e4e4e7',
          300: '#d4d4d8',
          400: '#a1a1aa',
          500: '#71717a',
          600: '#52525b',
          700: '#3f3f46',
          800: '#27272a',
          900: '#18181b',
        },
      },
      fontFamily: {
        sans: [
          '"Pretendard Variable"',
          'Pretendard',
          '-apple-system',
          'BlinkMacSystemFont',
          'system-ui',
          'Roboto',
          '"Helvetica Neue"',
          '"Segoe UI"',
          '"Apple SD Gothic Neo"',
          '"Noto Sans KR"',
          '"Malgun Gothic"',
          'sans-serif',
        ],
        display: [
          '"Pretendard Variable"',
          'Pretendard',
          '-apple-system',
          'BlinkMacSystemFont',
          'system-ui',
          '"Apple SD Gothic Neo"',
          '"Noto Sans KR"',
          'sans-serif',
        ],
        mono: [
          '"JetBrains Mono"',
          '"Fira Code"',
          'ui-monospace',
          'SFMono-Regular',
          'Menlo',
          'Monaco',
          'Consolas',
          'monospace',
        ],
      },
      fontSize: {
        // 한글 헤드라인: 행간 1.2+ (블록 글자의 숨 쉬는 공간), 자간 -0.01~-0.02em.
        'hero': ['clamp(2.75rem, 5.5vw, 4.5rem)', { lineHeight: '1.22', letterSpacing: '-0.02em' }],
        'display': ['clamp(2.25rem, 4vw, 3.5rem)', { lineHeight: '1.28', letterSpacing: '-0.015em' }],
        'h2': ['clamp(1.75rem, 3vw, 2.5rem)', { lineHeight: '1.32', letterSpacing: '-0.012em' }],
        'h3': ['1.375rem', { lineHeight: '1.4', letterSpacing: '-0.008em' }],
        'micro': ['0.75rem', { lineHeight: '1.4', letterSpacing: '0.04em' }],
        'nano': ['0.6875rem', { lineHeight: '1.4', letterSpacing: '0.05em' }],
      },
      spacing: {
        '4.5': '1.125rem',
        '13': '3.25rem',
        '15': '3.75rem',
        '18': '4.5rem',
        '22': '5.5rem',
        '26': '6.5rem',
        '30': '7.5rem',
        '34': '8.5rem',
      },
      borderRadius: {
        'instrument': '4px',
        'panel': '8px',
        'card': '16px',
        '2card': '20px',
        '3card': '24px',
      },
      boxShadow: {
        'inset-panel': 'inset 0 1px 3px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06)',
        'chassis': '0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06)',
        'glow-sm': '0 0 12px rgba(59,130,246,0.3)',
        'glow-md': '0 0 24px rgba(59,130,246,0.25), 0 0 48px rgba(59,130,246,0.1)',
        'glow-lg': '0 0 36px rgba(59,130,246,0.35), 0 0 72px rgba(59,130,246,0.15)',
        'glass-card': '0 12px 32px -4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08)',
      },
      animation: {
        'glow-pulse': 'glow-pulse 2s ease-in-out infinite',
        'scan': 'scan 8s linear infinite',
        'blink': 'blink 1.4s ease-in-out infinite',
        'fade-in-up': 'fade-in-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards',
      },
      keyframes: {
        'glow-pulse': {
          '0%, 100%': { opacity: '0.4' },
          '50%': { opacity: '1' },
        },
        'scan': {
          '0%': { transform: 'translateY(-100%)' },
          '100%': { transform: 'translateY(100%)' },
        },
        'blink': {
          '0%, 100%': { opacity: '1' },
          '50%': { opacity: '0.3' },
        },
        'fade-in-up': {
          '0%': { opacity: '0', transform: 'translateY(16px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
      },
    },
  },
  plugins: [],
}