pounce/frontend/tailwind.config.ts

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        background: {
          DEFAULT: '#08080a',
          secondary: '#0c0c0f',
          tertiary: '#121215',
          elevated: '#18181c',
        },
        foreground: {
          DEFAULT: '#fafaf9',
          muted: '#a1a1a1',
          subtle: '#6a6a6a',
        },
        accent: {
          DEFAULT: '#10b981',
          hover: '#059669',
          muted: '#10b98112',
          soft: '#10b98108',
        },
        warning: {
          DEFAULT: '#f59e0b',
          muted: '#f59e0b15',
        },
        danger: {
          DEFAULT: '#ef4444',
          muted: '#ef444412',
        },
        border: {
          DEFAULT: '#1a1a1f',
          hover: '#26262d',
          subtle: '#141418',
        },
      },
      fontFamily: {
        sans: ['var(--font-sans)', 'system-ui', 'sans-serif'],
        mono: ['var(--font-mono)', 'JetBrains Mono', 'monospace'],
        display: ['var(--font-display)', 'Georgia', 'serif'],
      },
      fontSize: {
        // ===== DISPLAY SIZES (Headlines) =====
        // Hero - Main landing page (mobile → tablet → desktop → large)
        'hero-sm': ['2.5rem', { lineHeight: '1.05', letterSpacing: '-0.03em' }],      // 40px
        'hero': ['3.5rem', { lineHeight: '1.05', letterSpacing: '-0.035em' }],        // 56px
        'hero-md': ['5rem', { lineHeight: '1.02', letterSpacing: '-0.04em' }],        // 80px
        'hero-lg': ['6.5rem', { lineHeight: '1.0', letterSpacing: '-0.045em' }],      // 104px
        'hero-xl': ['8rem', { lineHeight: '0.95', letterSpacing: '-0.05em' }],        // 128px
        
        // Display - Page titles, section heads
        'display-sm': ['1.5rem', { lineHeight: '1.15', letterSpacing: '-0.02em' }],   // 24px
        'display': ['2rem', { lineHeight: '1.12', letterSpacing: '-0.025em' }],       // 32px
        'display-md': ['2.5rem', { lineHeight: '1.1', letterSpacing: '-0.03em' }],    // 40px
        'display-lg': ['3.25rem', { lineHeight: '1.08', letterSpacing: '-0.035em' }], // 52px
        'display-xl': ['4.5rem', { lineHeight: '1.05', letterSpacing: '-0.04em' }],   // 72px
        
        // Heading - Cards, smaller sections
        'heading-sm': ['1.125rem', { lineHeight: '1.3', letterSpacing: '-0.01em' }],  // 18px
        'heading': ['1.25rem', { lineHeight: '1.25', letterSpacing: '-0.015em' }],    // 20px
        'heading-md': ['1.5rem', { lineHeight: '1.2', letterSpacing: '-0.02em' }],    // 24px
        'heading-lg': ['1.875rem', { lineHeight: '1.15', letterSpacing: '-0.02em' }], // 30px
        
        // ===== BODY SIZES =====
        'body-xs': ['0.8125rem', { lineHeight: '1.6' }],  // 13px
        'body-sm': ['0.875rem', { lineHeight: '1.65' }],  // 14px
        'body': ['1rem', { lineHeight: '1.7' }],          // 16px
        'body-md': ['1.0625rem', { lineHeight: '1.7' }],  // 17px
        'body-lg': ['1.125rem', { lineHeight: '1.75' }],  // 18px
        'body-xl': ['1.25rem', { lineHeight: '1.8' }],    // 20px
        
        // ===== UI SIZES =====
        'ui-xs': ['0.6875rem', { lineHeight: '1.4', letterSpacing: '0.02em' }],  // 11px
        'ui-sm': ['0.75rem', { lineHeight: '1.45', letterSpacing: '0.015em' }],  // 12px
        'ui': ['0.8125rem', { lineHeight: '1.5', letterSpacing: '0.01em' }],     // 13px
        'ui-md': ['0.875rem', { lineHeight: '1.5' }],                             // 14px
        'ui-lg': ['0.9375rem', { lineHeight: '1.5' }],                            // 15px
        
        // Label - Uppercase labels
        'label': ['0.6875rem', { lineHeight: '1.3', letterSpacing: '0.1em', fontWeight: '500' }],  // 11px
        'label-md': ['0.75rem', { lineHeight: '1.35', letterSpacing: '0.08em', fontWeight: '500' }], // 12px
      },
      spacing: {
        '18': '4.5rem',
        '22': '5.5rem',
        '26': '6.5rem',
        '30': '7.5rem',
      },
      animation: {
        'fade-in': 'fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards',
        'slide-up': 'slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards',
        'scale-in': 'scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards',
        'glow-pulse': 'glowPulse 3s ease-in-out infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { opacity: '0', transform: 'translateY(24px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        scaleIn: {
          '0%': { opacity: '0', transform: 'scale(0.95)' },
          '100%': { opacity: '1', transform: 'scale(1)' },
        },
        glowPulse: {
          '0%, 100%': { opacity: '0.4' },
          '50%': { opacity: '0.7' },
        },
        shimmer: {
          '0%': { transform: 'translateX(-100%)' },
          '100%': { transform: 'translateX(100%)' },
        },
      },
    },
  },
  plugins: [],
}
export default config