/**
 * Variáveis CSS - Plugin Seleção de Peças para Assinantes
 * Centraliza cores, espaçamentos, tipografia e outros tokens de design
 */

:root {
    /* Cores Primárias */
    --spa-primary: #592294;
    --spa-primary-hover: #453175;
    --spa-primary-light: #7B3FB3;
    --spa-primary-dark: #453175;
    --spa-primary-alpha: rgba(89, 34, 148, 0.1);
    
    /* Cores Secundárias */
    --spa-secondary: #646970;
    --spa-secondary-hover: #50575e;
    --spa-secondary-light: #f6f7f7;
    
    /* Cores de Status */
    --spa-success: #16A085;
    --spa-success-bg: #A8E6CF;
    --spa-success-light: #A8E6CF;
    --spa-warning: #F39C12;
    --spa-warning-bg: #FCF3CF;
    --spa-warning-light: #FCF3CF;
    --spa-error: #E74C3C;
    --spa-error-bg: #FADBD8;
    --spa-error-light: #FADBD8;
    --spa-info: #3498DB;
    --spa-info-bg: #D6EAF8;
    --spa-info-light: #D6EAF8;
    
    /* Cores de Box Status */
    --spa-status-pending: #f0ad4e;
    --spa-status-pending-bg: #fcf8e3;
    --spa-status-sent: #5bc0de;
    --spa-status-sent-bg: #d1ecf1;
    --spa-status-completed: #5cb85c;
    --spa-status-completed-bg: #d4edda;
    --spa-status-paid: #28a745;
    --spa-status-paid-bg: #d1f2d1;
    --spa-status-processing: #17a2b8;
    --spa-status-processing-bg: #d1ecf1;
    
    /* Cores Neutras */
    --spa-white: #ffffff;
    --spa-gray-50: #f9fafb;
    --spa-gray-100: #f3f4f6;
    --spa-gray-200: #e5e7eb;
    --spa-gray-300: #d1d5db;
    --spa-gray-400: #9ca3af;
    --spa-gray-500: #6b7280;
    --spa-gray-600: #4b5563;
    --spa-gray-700: #374151;
    --spa-gray-800: #1f2937;
    --spa-gray-900: #111827;
    
    /* Espaçamentos */
    --spa-space-xs: 0.25rem;   /* 4px */
    --spa-space-sm: 0.5rem;    /* 8px */
    --spa-space-md: 0.75rem;   /* 12px */
    --spa-space-lg: 1rem;      /* 16px */
    --spa-space-xl: 1.5rem;    /* 24px */
    --spa-space-2xl: 2rem;     /* 32px */
    --spa-space-3xl: 3rem;     /* 48px */
    
    /* Tipografia */
    --spa-font-size-xs: 0.75rem;   /* 12px */
    --spa-font-size-sm: 0.875rem;  /* 14px */
    --spa-font-size-md: 1rem;      /* 16px */
    --spa-font-size-lg: 1.125rem;  /* 18px */
    --spa-font-size-xl: 1.25rem;   /* 20px */
    --spa-font-size-2xl: 1.5rem;   /* 24px */
    --spa-font-size-3xl: 1.875rem; /* 30px */
    
    --spa-font-weight-normal: 400;
    --spa-font-weight-medium: 500;
    --spa-font-weight-semibold: 600;
    --spa-font-weight-bold: 700;
    
    --spa-line-height-tight: 1.25;
    --spa-line-height-normal: 1.5;
    --spa-line-height-relaxed: 1.75;
    
    /* Bordas e Raios */
    --spa-border-width: 1px;
    --spa-border-color: var(--spa-gray-300);
    --spa-border-color-focus: var(--spa-primary);
    
    --spa-radius: 6px;
    --spa-radius-sm: 0.25rem;   /* 4px */
    --spa-radius-md: 0.375rem;  /* 6px */
    --spa-radius-lg: 8px;
    --spa-radius-xl: 12px;
    --spa-radius-2xl: 1rem;     /* 16px */
    --spa-radius-full: 9999px;
    
    /* Sombras */
    --spa-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --spa-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
    --spa-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --spa-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    /* Transições */
    --spa-transition: all 0.3s ease;
    --spa-transition-fast: 150ms ease-in-out;
    --spa-transition-normal: 250ms ease-in-out;
    --spa-transition-slow: 350ms ease-in-out;
    
    /* Z-index */
    --spa-z-dropdown: 1000;
    --spa-z-modal: 1050;
    --spa-z-tooltip: 1070;
    
    /* Larguras */
    --spa-container-sm: 640px;
    --spa-container-md: 768px;
    --spa-container-lg: 1024px;
    --spa-container-xl: 1280px;
}