/**
 * Modern Design System Theme
 * Centralized theme configuration with gradients, colors, shadows, and spacing
 */

export const theme = {
    // Color Palette
    colors: {
        // Primary colors
        primary: '#3b82f6',
        primaryDark: '#2563eb',
        primaryLight: '#60a5fa',
        secondary: '#8b5cf6',

        // Accent colors
        purple: '#8b5cf6',
        purpleDark: '#7c3aed',
        pink: '#ec4899',

        // Success
        success: '#10b981',
        successDark: '#059669',
        successLight: '#34d399',

        // Warning
        warning: '#f59e0b',
        warningDark: '#d97706',

        // Danger
        danger: '#ef4444',
        dangerDark: '#dc2626',

        // Neutrals
        white: '#ffffff',
        black: '#000000',
        gray50: '#f9fafb',
        gray100: '#f3f4f6',
        gray200: '#e5e7eb',
        gray300: '#d1d5db',
        gray400: '#9ca3af',
        gray500: '#6b7280',
        gray600: '#4b5563',
        gray700: '#374151',
        gray800: '#1f2937',
        gray900: '#111827',

        // Backgrounds
        background: '#f5f5f5',
        backgroundDark: '#0f172a',
        surface: '#ffffff',
        surfaceDark: '#1e293b',
    },

    // Gradient Definitions
    gradients: {
        primary: ['#3b82f6', '#8b5cf6'] as const,
        primaryVertical: ['#3b82f6', '#2563eb'] as const,
        success: ['#10b981', '#059669'] as const,
        warning: ['#f59e0b', '#d97706'] as const,
        danger: ['#ef4444', '#ec4899'] as const,
        purple: ['#8b5cf6', '#7c3aed'] as const,
        ocean: ['#06b6d4', '#3b82f6'] as const,
        sunset: ['#f59e0b', '#ef4444'] as const,
        forest: ['#10b981', '#059669'] as const,
        lavender: ['#a78bfa', '#ec4899'] as const,
        dark: ['#1e293b', '#0f172a'] as const,
        // Premium metallic gradients
        blueMetallic: ['#1e40af', '#06b6d4', '#10b981'] as const,
        amberMetallic: ['#b45309', '#f59e0b', '#fbbf24'] as const,
        magentaMetallic: ['#be185d', '#ec4899', '#f472b6'] as const,
        emeraldMetallic: ['#047857', '#10b981', '#6ee7b7'] as const,
    },

    // Shadow System
    shadows: {
        subtle: {
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 1 },
            shadowOpacity: 0.05,
            shadowRadius: 2,
            elevation: 2,
        },
        medium: {
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.1,
            shadowRadius: 4,
            elevation: 3,
        },
        strong: {
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 4 },
            shadowOpacity: 0.15,
            shadowRadius: 8,
            elevation: 5,
        },
        glow: {
            shadowColor: '#3b82f6',
            shadowOffset: { width: 0, height: 4 },
            shadowOpacity: 0.3,
            shadowRadius: 12,
            elevation: 8,
        },
        glowDanger: {
            shadowColor: '#ef4444',
            shadowOffset: { width: 0, height: 4 },
            shadowOpacity: 0.3,
            shadowRadius: 12,
            elevation: 8,
        },
    },

    // Typography
    typography: {
        // Font sizes
        fontSize: {
            xs: 12,
            sm: 14,
            base: 16,
            lg: 18,
            xl: 20,
            '2xl': 24,
            '3xl': 28,
            '4xl': 32,
            '5xl': 36,
        },
        // Font weights
        fontWeight: {
            normal: '400' as const,
            medium: '500' as const,
            semibold: '600' as const,
            bold: '700' as const,
            extrabold: '800' as const,
        },
        // Line heights
        lineHeight: {
            tight: 1.2,
            normal: 1.5,
            relaxed: 1.75,
        },
    },

    // Spacing Scale
    spacing: {
        xs: 4,
        sm: 8,
        md: 12,
        lg: 16,
        xl: 20,
        '2xl': 24,
        '3xl': 32,
        '4xl': 40,
        '5xl': 48,
    },

    // Border Radius
    borderRadius: {
        sm: 4,
        md: 8,
        lg: 12,
        xl: 16,
        '2xl': 20,
        '3xl': 24,
        full: 9999,
    },

    // Animation Timing
    animation: {
        duration: {
            fast: 150,
            normal: 250,
            slow: 350,
        },
        easing: {
            easeIn: 'ease-in',
            easeOut: 'ease-out',
            easeInOut: 'ease-in-out',
        },
    },

    // Glassmorphism
    glass: {
        light: {
            backgroundColor: 'rgba(255, 255, 255, 0.7)',
            borderWidth: 1,
            borderColor: 'rgba(255, 255, 255, 0.3)',
        },
        dark: {
            backgroundColor: 'rgba(0, 0, 0, 0.3)',
            borderWidth: 1,
            borderColor: 'rgba(255, 255, 255, 0.1)',
        },
    },
};

export type Theme = typeof theme;