my2/tailwind.config.ts

import type { Config } from 'tailwindcss'

export default {
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './app.vue',
    './error.vue',
  ],
  theme: {
    extend: {
      // experimenta Color Palette
      colors: {
        // shadcn-ui color variables
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },

        // experimenta Brand Colors (kept separate for custom use)
        'experimenta-primary': {
          DEFAULT: '#e6007e',
          hover: '#c2006a',
          light: '#ff4081',
        },
        'experimenta-secondary': {
          DEFAULT: '#e91e63',
          dark: '#c2185b',
        },
        'experimenta-accent': {
          DEFAULT: '#f59d24',
          hover: '#ffb347',
        },
        red: '#E40521',

        // Purple Variants (Background)
        purple: {
          dark: '#2e1065',
          deeper: '#1a0a3a',
          darkest: '#0f051d',
        },

        // Semantic Colors
        success: {
          DEFAULT: '#46c74a',
          dark: '#3ba83e',
        },
        error: {
          DEFAULT: '#e53e3e',
          dark: '#c53030',
        },
        warning: {
          DEFAULT: '#f59d24',
          dark: '#dd8a1e',
        },
        info: {
          DEFAULT: '#4299e1',
          dark: '#3182ce',
        },
      },

      // Font Sizes (Mobile-First with responsive variants)
      fontSize: {
        // H1
        '4xl': ['36px', { lineHeight: '1.2', letterSpacing: '-1px' }],
        // H2
        '3xl': ['30px', { lineHeight: '1.3', letterSpacing: '-0.5px' }],
        // H3
        '2xl': ['24px', { lineHeight: '1.4' }],
        // H4
        xl: ['20px', { lineHeight: '1.4' }],
        // H5
        lg: ['18px', { lineHeight: '1.5', letterSpacing: '0.5px' }],
        // Body
        base: ['16px', { lineHeight: '1.6' }],
        // Small
        sm: ['14px', { lineHeight: '1.6' }],
        // Tiny
        xs: ['12px', { lineHeight: '1.5' }],
      },

      // Spacing System (8px Grid)
      spacing: {
        '1': '4px',
        '2': '8px',
        '3': '12px',
        '4': '16px',
        '5': '20px',
        '6': '24px',
        '8': '30px',
        '10': '40px',
        '15': '60px',
        '20': '80px',
        '25': '100px', // For status icons
      },

      // Border Radius
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
        xl: '20px',
        '2xl': '25px',
        full: '100%',
      },

      // Max Widths (Containers)
      maxWidth: {
        'container-main': '800px',
        'container-wide': '1200px',
        'container-full': '1760px',
      },

      // Background Gradients
      backgroundImage: {
        'gradient-primary': 'linear-gradient(135deg, #2e1065 0%, #1a0a3a 50%, #0f051d 100%)',
        'gradient-footer': 'linear-gradient(135deg, #1a0a3a 0%, #0f051d 100%)',
        'gradient-glass':
          'linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))',
        'gradient-button': 'linear-gradient(to left, #e6007e, #e6007e, #E40521, #e6007e)',
        'gradient-success': 'linear-gradient(90deg, #46c74a 0%, #66d96a 50%, #46c74a 100%)',
      },

      // Background Sizes
      backgroundSize: {
        'size-300': '300%',
        'size-200': '200%',
      },

      // Background Positions
      backgroundPosition: {
        left: 'left',
        right: 'right',
      },

      // Box Shadows
      boxShadow: {
        glass: '0 20px 40px rgba(0, 0, 0, 0.3)',
        'inner-light': 'inset 0 2px 4px rgba(0, 0, 0, 0.2)',
      },

      // Backdrop Blur
      backdropBlur: {
        xl: '15px',
      },

      // Animations
      keyframes: {
        pulse: {
          '0%, 100%': { transform: 'scale(1)' },
          '50%': { transform: 'scale(1.1)' },
        },
        shimmer: {
          '0%': { backgroundPosition: '-200% 0' },
          '100%': { backgroundPosition: '200% 0' },
        },
      },
      animation: {
        pulse: 'pulse 2s ease-in-out infinite',
        shimmer: 'shimmer 3s ease-in-out infinite',
      },

      // Transitions
      transitionDuration: {
        '300': '300ms',
        '1000': '1000ms',
      },
    },
  },
  plugins: [],
} satisfies Config