<?php

return [
    /*
    |--------------------------------------------------------------------------
    | UI Color Variants
    |--------------------------------------------------------------------------
    |
    | Centralized color palette for all UI components. This ensures consistency
    | across buttons, badges, alerts, and other components.
    |
    */

    'colors' => [
        'variants' => [
            'primary' => [
                'bg' => 'bg-indigo-600',
                'text' => 'text-white',
                'hover' => 'hover:bg-indigo-700',
                'focus' => 'focus:ring-indigo-500',
                'light_bg' => 'bg-indigo-100',
                'light_text' => 'text-indigo-800',
                'dark_light_bg' => 'dark:bg-indigo-900',
                'dark_light_text' => 'dark:text-indigo-300',
                'dot' => 'bg-indigo-500',
            ],
            'success' => [
                'bg' => 'bg-green-600',
                'text' => 'text-white',
                'hover' => 'hover:bg-green-700',
                'focus' => 'focus:ring-green-500',
                'light_bg' => 'bg-green-100',
                'light_text' => 'text-green-800',
                'dark_light_bg' => 'dark:bg-green-900',
                'dark_light_text' => 'dark:text-green-300',
                'dot' => 'bg-green-500',
            ],
            'danger' => [
                'bg' => 'bg-red-600',
                'text' => 'text-white',
                'hover' => 'hover:bg-red-700',
                'focus' => 'focus:ring-red-500',
                'light_bg' => 'bg-red-100',
                'light_text' => 'text-red-800',
                'dark_light_bg' => 'dark:bg-red-900',
                'dark_light_text' => 'dark:text-red-300',
                'dot' => 'bg-red-500',
            ],
            'warning' => [
                'bg' => 'bg-yellow-500',
                'text' => 'text-white',
                'hover' => 'hover:bg-yellow-600',
                'focus' => 'focus:ring-yellow-500',
                'light_bg' => 'bg-yellow-100',
                'light_text' => 'text-yellow-800',
                'dark_light_bg' => 'dark:bg-yellow-900',
                'dark_light_text' => 'dark:text-yellow-300',
                'dot' => 'bg-yellow-500',
            ],
            'info' => [
                'bg' => 'bg-blue-600',
                'text' => 'text-white',
                'hover' => 'hover:bg-blue-700',
                'focus' => 'focus:ring-blue-500',
                'light_bg' => 'bg-blue-100',
                'light_text' => 'text-blue-800',
                'dark_light_bg' => 'dark:bg-blue-900',
                'dark_light_text' => 'dark:text-blue-300',
                'dot' => 'bg-blue-500',
            ],
            'gray' => [
                'bg' => 'bg-gray-600',
                'text' => 'text-white',
                'hover' => 'hover:bg-gray-700',
                'focus' => 'focus:ring-gray-500',
                'light_bg' => 'bg-gray-100',
                'light_text' => 'text-gray-800',
                'dark_light_bg' => 'dark:bg-gray-700',
                'dark_light_text' => 'dark:text-gray-300',
                'dot' => 'bg-gray-500',
            ],
            'secondary' => [
                'bg' => 'bg-white',
                'text' => 'text-gray-700',
                'hover' => 'hover:bg-gray-50',
                'focus' => 'focus:ring-indigo-500',
                'border' => 'border border-gray-300',
                'light_bg' => 'bg-gray-100',
                'light_text' => 'text-gray-800',
                'dark_light_bg' => 'dark:bg-gray-700',
                'dark_light_text' => 'dark:text-gray-300',
                'dot' => 'bg-gray-400',
            ],
            'orange' => [
                'bg' => 'bg-orange-600',
                'text' => 'text-white',
                'hover' => 'hover:bg-orange-700',
                'focus' => 'focus:ring-orange-500',
                'light_bg' => 'bg-orange-100',
                'light_text' => 'text-orange-800',
                'dark_light_bg' => 'dark:bg-orange-900',
                'dark_light_text' => 'dark:text-orange-300',
                'dot' => 'bg-orange-500',
            ],
            'purple' => [
                'bg' => 'bg-purple-600',
                'text' => 'text-white',
                'hover' => 'hover:bg-purple-700',
                'focus' => 'focus:ring-purple-500',
                'light_bg' => 'bg-purple-100',
                'light_text' => 'text-purple-800',
                'dark_light_bg' => 'dark:bg-purple-900',
                'dark_light_text' => 'dark:text-purple-300',
                'dot' => 'bg-purple-500',
            ],
            'teal' => [
                'bg' => 'bg-teal-600',
                'text' => 'text-white',
                'hover' => 'hover:bg-teal-700',
                'focus' => 'focus:ring-teal-500',
                'light_bg' => 'bg-teal-100',
                'light_text' => 'text-teal-800',
                'dark_light_bg' => 'dark:bg-teal-900',
                'dark_light_text' => 'dark:text-teal-300',
                'dot' => 'bg-teal-500',
            ],
            'pink' => [
                'bg' => 'bg-pink-600',
                'text' => 'text-white',
                'hover' => 'hover:bg-pink-700',
                'focus' => 'focus:ring-pink-500',
                'light_bg' => 'bg-pink-100',
                'light_text' => 'text-pink-800',
                'dark_light_bg' => 'dark:bg-pink-900',
                'dark_light_text' => 'dark:text-pink-300',
                'dot' => 'bg-pink-500',
            ],
        ],

        /*
        |--------------------------------------------------------------------------
        | Status to Variant Mapping
        |--------------------------------------------------------------------------
        |
        | Maps common status values to their corresponding color variants.
        | Used by status badges and other status-displaying components.
        |
        */

        'status_map' => [
            // Success states
            'active' => 'success',
            'completed' => 'success',
            'paid' => 'success',
            'approved' => 'success',
            'published' => 'success',
            'verified' => 'success',
            'resolved' => 'success',

            // Warning states
            'pending' => 'warning',
            'in_progress' => 'info',
            'processing' => 'info',
            'review' => 'warning',
            'at_risk' => 'warning',

            // Danger states
            'overdue' => 'danger',
            'cancelled' => 'danger',
            'failed' => 'danger',
            'rejected' => 'danger',
            'expired' => 'danger',
            'churned' => 'danger',

            // Neutral states
            'draft' => 'gray',
            'archived' => 'gray',
            'inactive' => 'gray',
            'paused' => 'gray',
            'sent' => 'info',

            // Priority states
            'urgent' => 'danger',
            'high' => 'orange',
            'medium' => 'warning',
            'low' => 'gray',

            // Pipeline stages
            'prospect' => 'purple',
            'onboarding' => 'info',
            'qualified' => 'teal',
        ],

        /*
        |--------------------------------------------------------------------------
        | Trend Indicators
        |--------------------------------------------------------------------------
        |
        | Configuration for trend direction indicators (up/down/neutral).
        |
        */

        'trends' => [
            'up' => [
                'color' => 'text-green-600',
                'dark_color' => 'dark:text-green-400',
                'icon' => 'arrow-up',
                'label' => 'Increase',
            ],
            'down' => [
                'color' => 'text-red-600',
                'dark_color' => 'dark:text-red-400',
                'icon' => 'arrow-down',
                'label' => 'Decrease',
            ],
            'neutral' => [
                'color' => 'text-gray-500',
                'dark_color' => 'dark:text-gray-400',
                'icon' => 'minus',
                'label' => 'No change',
            ],
        ],
    ],

    /*
    |--------------------------------------------------------------------------
    | Component Sizes
    |--------------------------------------------------------------------------
    |
    | Standard size presets for various UI components.
    |
    */

    'sizes' => [
        'badge' => [
            'xs' => 'px-1.5 py-0.5 text-xs',
            'sm' => 'px-2 py-0.5 text-xs',
            'md' => 'px-2.5 py-0.5 text-xs',
            'lg' => 'px-3 py-1 text-sm',
        ],
        'button' => [
            'xs' => 'px-2 py-1 text-xs',
            'sm' => 'px-2.5 py-1.5 text-xs',
            'md' => 'px-3 py-2 text-sm',
            'lg' => 'px-4 py-2 text-base',
            'xl' => 'px-6 py-3 text-base',
        ],
        'icon' => [
            'xs' => 'h-3 w-3',
            'sm' => 'h-4 w-4',
            'md' => 'h-5 w-5',
            'lg' => 'h-6 w-6',
            'xl' => 'h-8 w-8',
        ],
    ],
];