/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        ink: {
          DEFAULT: 'var(--color-ink)',
          light: 'var(--color-ink-light)',
          lighter: 'var(--color-ink-lighter)',
          rgb: 'var(--color-ink-rgb)',
        },
        brand: {
          DEFAULT: 'var(--color-brand)',
          hover: 'var(--color-brand-hover)',
          light: 'var(--color-brand-light)',
          soft: 'var(--color-brand-soft)',
          bg: 'var(--color-brand-bg)',
          rgb: 'var(--color-brand-rgb)',
        },
        accent: {
          blue: 'var(--color-accent-blue)',
          'blue-soft': 'var(--color-accent-blue-soft)',
          teal: 'var(--color-accent-teal)',
          'teal-soft': 'var(--color-accent-teal-soft)',
          amber: 'var(--color-accent-amber)',
          'amber-soft': 'var(--color-accent-amber-soft)',
          purple: 'var(--color-accent-purple)',
          'purple-soft': 'var(--color-accent-purple-soft)',
        },
        bg: {
          primary: 'var(--color-bg-primary)',
          secondary: 'var(--color-bg-secondary)',
          tertiary: 'var(--color-bg-tertiary)',
          section: 'var(--color-bg-section)',
          hover: 'var(--color-bg-hover)',
          elevated: 'var(--color-bg-elevated)',
        },
        text: {
          primary: 'var(--color-text-primary)',
          secondary: 'var(--color-text-secondary)',
          tertiary: 'var(--color-text-tertiary)',
          muted: 'var(--color-text-muted)',
          subtle: 'var(--color-text-subtle)',
          placeholder: 'var(--color-text-placeholder)',
          hint: 'var(--color-text-hint)',
          inverse: 'var(--color-text-inverse)',
        },
        border: {
          primary: 'var(--color-border-primary)',
          secondary: 'var(--color-border-secondary)',
          accent: 'var(--color-border-accent)',
          light: 'var(--color-border-light)',
          dark: 'var(--color-border-dark)',
          brand: 'var(--color-border-brand)',
        },
        link: {
          DEFAULT: 'var(--color-link)',
          hover: 'var(--color-link-hover)',
        },
        success: {
          DEFAULT: 'var(--color-success)',
          hover: 'var(--color-success-hover)',
          bg: 'var(--color-success-bg)',
          rgb: 'var(--color-success-rgb)',
        },
        warning: {
          DEFAULT: 'var(--color-warning)',
          hover: 'var(--color-warning-hover)',
          bg: 'var(--color-warning-bg)',
          rgb: 'var(--color-warning-rgb)',
        },
        error: {
          DEFAULT: 'var(--color-error)',
          hover: 'var(--color-error-hover)',
          bg: 'var(--color-error-bg)',
          rgb: 'var(--color-error-rgb)',
        },
        info: {
          DEFAULT: 'var(--color-info)',
          bg: 'var(--color-info-bg)',
        },
        dark: {
          bg: 'var(--color-dark-bg)',
          'bg-secondary': 'var(--color-dark-bg-secondary)',
          'bg-tertiary': 'var(--color-dark-bg-tertiary)',
          'text-primary': 'var(--color-dark-text-primary)',
          'text-secondary': 'var(--color-dark-text-secondary)',
          'text-muted': 'var(--color-dark-text-muted)',
          border: 'var(--color-dark-border)',
        },
      },
      fontFamily: {
        sans: ['var(--font-sans)'],
        display: ['var(--font-display)'],
        mono: ['var(--font-mono)'],
        brand: ['var(--font-brand)'],
        serif: ['var(--font-serif)'],
      },
      fontSize: {
        caption: 'var(--font-size-caption)',
        xs: 'var(--font-size-xs)',
        sm: 'var(--font-size-sm)',
        base: 'var(--font-size-base)',
        lg: 'var(--font-size-lg)',
        xl: 'var(--font-size-xl)',
        '2xl': 'var(--font-size-2xl)',
        '3xl': 'var(--font-size-3xl)',
        '4xl': 'var(--font-size-4xl)',
        '5xl': 'var(--font-size-5xl)',
        '6xl': 'var(--font-size-6xl)',
        '7xl': 'var(--font-size-7xl)',
        display: 'var(--font-size-display)',
      },
      lineHeight: {
        caption: 'var(--line-height-caption)',
        tight: 'var(--line-height-tight)',
        snug: 'var(--line-height-snug)',
        normal: 'var(--line-height-normal)',
        relaxed: 'var(--line-height-relaxed)',
      },
      letterSpacing: {
        tighter: 'var(--letter-spacing-tighter)',
        tight: 'var(--letter-spacing-tight)',
        normal: 'var(--letter-spacing-normal)',
        wide: 'var(--letter-spacing-wide)',
        wider: 'var(--letter-spacing-wider)',
        widest: 'var(--letter-spacing-widest)',
        eyebrow: 'var(--letter-spacing-eyebrow)',
      },
      spacing: {
        xs: 'var(--spacing-xs)',
        sm: 'var(--spacing-sm)',
        md: 'var(--spacing-md)',
        lg: 'var(--spacing-lg)',
        xl: 'var(--spacing-xl)',
        '2xl': 'var(--spacing-2xl)',
        '3xl': 'var(--spacing-3xl)',
        '4xl': 'var(--spacing-4xl)',
        '5xl': 'var(--spacing-5xl)',
        '6xl': 'var(--spacing-6xl)',
      },
      borderRadius: {
        xs: 'var(--radius-xs)',
        sm: 'var(--radius-sm)',
        md: 'var(--radius-md)',
        lg: 'var(--radius-lg)',
        xl: 'var(--radius-xl)',
        '2xl': 'var(--radius-2xl)',
        '3xl': 'var(--radius-3xl)',
        full: 'var(--radius-full)',
      },
      boxShadow: {
        xs: 'var(--shadow-xs)',
        sm: 'var(--shadow-sm)',
        md: 'var(--shadow-md)',
        lg: 'var(--shadow-lg)',
        xl: 'var(--shadow-xl)',
        brand: 'var(--shadow-brand)',
        'brand-hover': 'var(--shadow-brand-hover)',
        inset: 'var(--shadow-inset)',
        glow: 'var(--shadow-glow)',
      },
      transitionDuration: {
        instant: 'var(--transition-instant)',
        fast: 'var(--transition-fast)',
        normal: 'var(--transition-normal)',
        slow: 'var(--transition-slow)',
        slower: 'var(--transition-slower)',
        gentle: 'var(--transition-gentle)',
      },
      transitionTimingFunction: {
        standard: 'var(--ease-standard)',
        decelerate: 'var(--ease-decelerate)',
        accelerate: 'var(--ease-accelerate)',
        'ease-out': 'var(--ease-ink)',
        'ease-in-out': 'var(--ease-sharp)',
        'ease-spring': 'var(--ease-spring)',
        'ease-spring-soft': 'var(--ease-spring-soft)',
        sharp: 'var(--ease-sharp)',
        ink: 'var(--ease-ink)',
      },
      maxWidth: {
        container: 'var(--container-max)',
      },
      animation: {
        'fade-in-up': 'fadeInUp 0.7s var(--ease-out) forwards',
        'fade-in': 'fadeIn 0.5s var(--ease-out) forwards',
        'scale-in': 'scaleIn 0.5s var(--ease-out) forwards',
        'slide-in-left': 'slideInLeft 0.6s var(--ease-out) forwards',
        'slide-in-right': 'slideInRight 0.6s var(--ease-out) forwards',
        'pulse-soft': 'pulse-soft 2s ease-in-out infinite',
        'ripple': 'ripple 0.6s ease-out forwards',
        'skeleton-pulse': 'skeletonPulse 2s ease-in-out infinite',
        'accordion-down': 'accordionDown 0.2s ease-out forwards',
        'accordion-up': 'accordionUp 0.2s ease-out forwards',
      },
      keyframes: {
        fadeInUp: {
          from: { opacity: '0', transform: 'translateY(24px)' },
          to: { opacity: '1', transform: 'translateY(0)' },
        },
        fadeIn: {
          from: { opacity: '0' },
          to: { opacity: '1' },
        },
        slideInLeft: {
          from: { opacity: '0', transform: 'translateX(-32px)' },
          to: { opacity: '1', transform: 'translateX(0)' },
        },
        slideInRight: {
          from: { opacity: '0', transform: 'translateX(32px)' },
          to: { opacity: '1', transform: 'translateX(0)' },
        },
        scaleIn: {
          from: { opacity: '0', transform: 'scale(0.95)' },
          to: { opacity: '1', transform: 'scale(1)' },
        },
        'pulse-soft': {
          '0%, 100%': { opacity: '1' },
          '50%': { opacity: '0.6' },
        },
        ripple: {
          '0%': { transform: 'scale(0)', opacity: '0.5' },
          '100%': { transform: 'scale(4)', opacity: '0' },
        },
        skeletonPulse: {
          '0%, 100%': { backgroundColor: 'var(--color-bg-tertiary)', opacity: '1' },
          '50%': { backgroundColor: 'color-mix(in srgb, var(--color-brand) 8%, var(--color-bg-tertiary))', opacity: '0.8' },
        },
        accordionDown: {
          from: { height: '0', opacity: '0' },
          to: { height: 'var(--radix-accordion-content-height)', opacity: '1' },
        },
        accordionUp: {
          from: { height: 'var(--radix-accordion-content-height)', opacity: '1' },
          to: { height: '0', opacity: '0' },
        },
      },
    },
  },
  plugins: [
    require('tailwindcss-animate'),
  ],
};