/**
 * FlowPRM Design System - Color Tokens
 * =====================================
 * Sistema de cores unificado para toda a aplicacao.
 *
 * IMPORTANTE: Este e o UNICO arquivo que deve definir cores.
 * NUNCA use valores hexadecimais hardcoded nos componentes.
 * SEMPRE use estas variaveis CSS.
 *
 * Cores Primarias:
 * - A cor principal da marca e #1B73E8 (Onfly Blue)
 * - NAO usar #007bff (Bootstrap 4) nem #0d6efd (Bootstrap 5)
 *
 * @version 1.0.0
 * @date Janeiro 2026
 */

:root {
    /* ========================================
       CORES PRIMARIAS DA MARCA (Onfly)
       ======================================== */

    /* Cor principal - Onfly Blue */
    --prm-primary: #1B73E8;
    --prm-primary-hover: #1557b0;
    --prm-primary-light: #e8f0fe;
    --prm-primary-dark: #1557B2;
    --prm-primary-rgb: 27, 115, 232;

    /* Alias para compatibilidade com design-system existente */
    --prm-brand-primary: var(--prm-primary);
    --prm-brand-primary-hover: var(--prm-primary-hover);
    --prm-brand-primary-light: var(--prm-primary-light);
    --prm-brand-primary-dark: var(--prm-primary-dark);
    --prm-brand-primary-rgb: var(--prm-primary-rgb);

    /* ========================================
       CORES DE STATUS/SEMANTICAS
       ======================================== */

    /* Success - Verde */
    --prm-success: #10b981;
    --prm-success-hover: #059669;
    --prm-success-light: #d1fae5;
    --prm-success-dark: #059669;
    --prm-success-bg: #dcfce7;
    --prm-success-text: #166534;
    --prm-success-rgb: 16, 185, 129;

    /* Warning - Amarelo/Laranja */
    --prm-warning: #f59e0b;
    --prm-warning-hover: #d97706;
    --prm-warning-light: #fef3c7;
    --prm-warning-dark: #d97706;
    --prm-warning-bg: #fef3c7;
    --prm-warning-text: #92400e;
    --prm-warning-rgb: 245, 158, 11;

    /* Danger - Vermelho */
    --prm-danger: #ef4444;
    --prm-danger-hover: #dc2626;
    --prm-danger-light: #fecaca;
    --prm-danger-dark: #dc2626;
    --prm-danger-bg: #fee2e2;
    --prm-danger-text: #991b1b;
    --prm-danger-rgb: 239, 68, 68;

    /* Info - Ciano */
    --prm-info: #06b6d4;
    --prm-info-hover: #0891b2;
    --prm-info-light: #cffafe;
    --prm-info-dark: #0891b2;
    --prm-info-bg: #e0f2fe;
    --prm-info-text: #0369a1;
    --prm-info-rgb: 6, 182, 212;

    /* ========================================
       CORES NEUTRAS
       ======================================== */

    /* Textos */
    --prm-text-primary: #1e293b;
    --prm-text-secondary: #374151;
    --prm-text-muted: #6b7280;
    --prm-text-light: #9ca3af;
    --prm-text-inverse: #ffffff;
    --prm-text-inverse-muted: rgba(255, 255, 255, 0.85);

    /* Backgrounds */
    --prm-bg-white: #ffffff;
    --prm-bg-light: #f8fafc;
    --prm-bg-secondary: #f1f5f9;
    --prm-bg-tertiary: #fafbfc;
    --prm-bg-dark: #1e293b;

    /* Bordas */
    --prm-border: #e2e8f0;
    --prm-border-light: #f1f5f9;
    --prm-border-dark: #cbd5e1;

    /* ========================================
       CORES ESPECIAIS/AUXILIARES
       ======================================== */

    /* Purple - Para elementos especiais */
    --prm-purple: #8b5cf6;
    --prm-purple-hover: #7c3aed;
    --prm-purple-light: #ddd6fe;
    --prm-purple-dark: #6d28d9;
    --prm-purple-rgb: 139, 92, 246;

    /* Orange - Alternativa ao warning */
    --prm-orange: #f97316;
    --prm-orange-hover: #ea580c;
    --prm-orange-light: #ffedd5;
    --prm-orange-dark: #c2410c;
    --prm-orange-rgb: 249, 115, 22;

    /* HubSpot - Para integracao */
    --prm-hubspot: #ff7a59;
    --prm-hubspot-hover: #ff5c35;
    --prm-hubspot-light: #ffe4dd;
    --prm-hubspot-rgb: 255, 122, 89;
    --prm-hubspot-alt: #ff7a00;
    --prm-hubspot-alt-hover: #e66a00;

    /* Indigo - Para dashboards e consultant */
    --prm-indigo: #6366f1;
    --prm-indigo-hover: #4f46e5;
    --prm-indigo-light: #e0e7ff;
    --prm-indigo-dark: #4338ca;
    --prm-indigo-rgb: 99, 102, 241;

    /* Pink - Para gamificacao */
    --prm-pink: #ec4899;
    --prm-pink-hover: #db2777;
    --prm-pink-light: #fce7f3;
    --prm-pink-dark: #be185d;
    --prm-pink-rgb: 236, 72, 153;

    /* Mensagens - Azul especifico */
    --prm-mensagens: #1E9BD9;
    --prm-mensagens-hover: #1580B8;
    --prm-mensagens-light: #e0f2fe;
    --prm-mensagens-rgb: 30, 155, 217;

    /* Gradiente Especial (sorteios, consultant) */
    --prm-gradient-special: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --prm-gradient-indigo: linear-gradient(135deg, var(--prm-indigo) 0%, var(--prm-indigo-dark) 100%);
    --prm-gradient-pink: linear-gradient(135deg, var(--prm-pink) 0%, var(--prm-pink-dark) 100%);
    --prm-gradient-hubspot: linear-gradient(135deg, var(--prm-hubspot-alt) 0%, #ff9500 100%);
    --prm-gradient-hubspot-hover: linear-gradient(135deg, var(--prm-hubspot-alt-hover) 0%, #e68500 100%);
    --prm-gradient-hubspot-alt: linear-gradient(135deg, var(--prm-hubspot) 0%, var(--prm-hubspot-hover) 100%);
    --prm-gradient-hubspot-alt-hover: linear-gradient(135deg, #e66a4a 0%, #e64d2e 100%);
    --prm-gradient-success-light: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    --prm-gradient-primary-light: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);

    /* ========================================
       CORES PARA PIPELINE DE COMISSOES
       ======================================== */

    --prm-status-pendente: #64748b;
    --prm-status-aprovado: #4f46e5;
    --prm-status-aguardando-nfse: #d97706;
    --prm-status-nfse-recebida: #0891b2;
    --prm-status-aguardando-pagamento: #ea580c;
    --prm-status-pago: #059669;

    /* ========================================
       CORES DE TIPO DE USUARIO (Badges)
       ======================================== */

    --prm-badge-admin-bg: #fef3c7;
    --prm-badge-admin-text: #92400e;

    --prm-badge-gerente-bg: #ddd6fe;
    --prm-badge-gerente-text: #6b21a8;

    --prm-badge-closer-bg: #cffafe;
    --prm-badge-closer-text: #0e7490;

    --prm-badge-hunter-bg: #fce7f3;
    --prm-badge-hunter-text: #9d174d;

    --prm-badge-parceiro-admin-bg: #fecaca;
    --prm-badge-parceiro-admin-text: #991b1b;

    --prm-badge-parceiro-filial-bg: #bbf7d0;
    --prm-badge-parceiro-filial-text: #065f46;

    --prm-badge-parceiro-executivo-bg: #bfdbfe;
    --prm-badge-parceiro-executivo-text: #1e40af;

    /* ========================================
       CORES DE STATUS DE LEADS
       ======================================== */

    --prm-lead-novo-bg: #dbeafe;
    --prm-lead-novo-text: #1e40af;

    --prm-lead-ativo-bg: #dcfce7;
    --prm-lead-ativo-text: #166534;

    --prm-lead-inativo-bg: #fecaca;
    --prm-lead-inativo-text: #991b1b;

    --prm-lead-pendente-bg: #fef3c7;
    --prm-lead-pendente-text: #92400e;

    --prm-lead-qualificado-bg: #fef3c7;
    --prm-lead-qualificado-text: #92400e;

    --prm-lead-fechado-bg: #dcfce7;
    --prm-lead-fechado-text: #166534;

    --prm-lead-perdido-bg: #fecaca;
    --prm-lead-perdido-text: #991b1b;

    /* ========================================
       CORES DE ACOES (Auditoria)
       ======================================== */

    --prm-action-insert-bg: #dcfce7;
    --prm-action-insert-text: #166534;

    --prm-action-update-bg: #dbeafe;
    --prm-action-update-text: #1e40af;

    --prm-action-delete-bg: #fecaca;
    --prm-action-delete-text: #991b1b;

    --prm-action-view-bg: #f3e8ff;
    --prm-action-view-text: #6b21a8;

    --prm-action-export-bg: #cffafe;
    --prm-action-export-text: #0e7490;

    /* ========================================
       GRADIENTES
       ======================================== */

    --prm-gradient-primary: linear-gradient(135deg, var(--prm-primary) 0%, var(--prm-primary-dark) 100%);
    --prm-gradient-success: linear-gradient(135deg, var(--prm-success) 0%, var(--prm-success-dark) 100%);
    --prm-gradient-warning: linear-gradient(135deg, var(--prm-warning) 0%, var(--prm-warning-dark) 100%);
    --prm-gradient-danger: linear-gradient(135deg, var(--prm-danger) 0%, var(--prm-danger-dark) 100%);
    --prm-gradient-info: linear-gradient(135deg, var(--prm-info) 0%, var(--prm-info-dark) 100%);
    --prm-gradient-purple: linear-gradient(135deg, var(--prm-purple) 0%, var(--prm-purple-dark) 100%);

    /* ========================================
       SOMBRAS COM COR
       ======================================== */

    --prm-shadow-primary: 0 3px 8px rgba(var(--prm-primary-rgb), 0.25);
    --prm-shadow-primary-lg: 0 6px 20px rgba(var(--prm-primary-rgb), 0.35);
    --prm-shadow-success: 0 3px 8px rgba(var(--prm-success-rgb), 0.25);
    --prm-shadow-warning: 0 3px 8px rgba(var(--prm-warning-rgb), 0.25);
    --prm-shadow-danger: 0 3px 8px rgba(var(--prm-danger-rgb), 0.25);
    --prm-shadow-info: 0 3px 8px rgba(var(--prm-info-rgb), 0.25);
    --prm-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
    --prm-shadow-hubspot: 0 2px 4px rgba(var(--prm-hubspot-rgb), 0.3);

    /* ========================================
       CORES ADICIONAIS PARA BADGES/STATUS
       ======================================== */

    /* Teal - Para aging badges */
    --prm-teal: #14b8a6;
    --prm-teal-light: #d1fae5;
    --prm-teal-dark: #065f46;

    /* Cores de borda numeradas */
    --prm-success-300: #86efac;
    --prm-primary-300: #93c5fd;
    --prm-purple-300: #c4b5fd;
    --prm-orange-200: #fed7aa;

    /* ========================================
       FOCUS RING
       ======================================== */

    --prm-ring-color: rgba(var(--prm-primary-rgb), 0.15);
    --prm-ring-width: 3px;
    --prm-ring-offset: 2px;
}

/* ========================================
   CLASSES UTILITARIAS DE COR
   ======================================== */

/* Texto */
.text-primary { color: var(--prm-primary) !important; }
.text-success { color: var(--prm-success) !important; }
.text-warning { color: var(--prm-warning) !important; }
.text-danger { color: var(--prm-danger) !important; }
.text-info { color: var(--prm-info) !important; }
.text-muted { color: var(--prm-text-muted) !important; }

/* Background */
.bg-primary { background-color: var(--prm-primary) !important; }
.bg-success { background-color: var(--prm-success) !important; }
.bg-warning { background-color: var(--prm-warning) !important; }
.bg-danger { background-color: var(--prm-danger) !important; }
.bg-info { background-color: var(--prm-info) !important; }
.bg-light { background-color: var(--prm-bg-light) !important; }
.bg-white { background-color: var(--prm-bg-white) !important; }

/* Background Light (para badges e alerts) */
.bg-primary-light { background-color: var(--prm-primary-light) !important; }
.bg-success-light { background-color: var(--prm-success-light) !important; }
.bg-warning-light { background-color: var(--prm-warning-light) !important; }
.bg-danger-light { background-color: var(--prm-danger-light) !important; }
.bg-info-light { background-color: var(--prm-info-light) !important; }

/* Border */
.border-primary { border-color: var(--prm-primary) !important; }
.border-success { border-color: var(--prm-success) !important; }
.border-warning { border-color: var(--prm-warning) !important; }
.border-danger { border-color: var(--prm-danger) !important; }
.border-info { border-color: var(--prm-info) !important; }

/* ========================================
   MAPEAMENTO DE CORES HARDCODED -> VARIAVEIS
   ========================================
   Use este mapa para migrar cores hardcoded:

   #1B73E8 -> var(--prm-primary)
   #007bff -> var(--prm-primary) (Bootstrap 4)
   #0d6efd -> var(--prm-primary) (Bootstrap 5)
   #3b82f6 -> var(--prm-primary) (Tailwind Blue)

   #10b981 -> var(--prm-success)
   #28a745 -> var(--prm-success) (Bootstrap)
   #059669 -> var(--prm-success-hover)

   #ef4444 -> var(--prm-danger)
   #dc3545 -> var(--prm-danger) (Bootstrap)
   #dc2626 -> var(--prm-danger-hover)

   #f59e0b -> var(--prm-warning)
   #ffc107 -> var(--prm-warning) (Bootstrap)
   #d97706 -> var(--prm-warning-hover)

   #ff7a59 -> var(--prm-hubspot)
   #ff5c35 -> var(--prm-hubspot-hover)

   #8b5cf6 -> var(--prm-purple)
   #7c3aed -> var(--prm-purple-hover)

   #6366f1 -> var(--prm-indigo)
   #4f46e5 -> var(--prm-indigo-hover)

   #ec4899 -> var(--prm-pink)
   #db2777 -> var(--prm-pink-hover)
   ======================================== */

/* Classes utilitarias de gradiente */
.bg-gradient-primary { background: var(--prm-gradient-primary) !important; }
.bg-gradient-success { background: var(--prm-gradient-success) !important; }
.bg-gradient-warning { background: var(--prm-gradient-warning) !important; }
.bg-gradient-danger { background: var(--prm-gradient-danger) !important; }
.bg-gradient-info { background: var(--prm-gradient-info) !important; }
.bg-gradient-purple { background: var(--prm-gradient-purple) !important; }
.bg-gradient-hubspot { background: var(--prm-gradient-hubspot) !important; }

/* Classes utilitarias HubSpot */
.text-hubspot { color: var(--prm-hubspot) !important; }
.bg-hubspot { background-color: var(--prm-hubspot) !important; }
.border-hubspot { border-color: var(--prm-hubspot) !important; }

/* Classes utilitarias Purple */
.text-purple { color: var(--prm-purple) !important; }
.bg-purple { background-color: var(--prm-purple) !important; }
.bg-purple-light { background-color: var(--prm-purple-light) !important; }
.border-purple { border-color: var(--prm-purple) !important; }

/* Classes utilitarias Indigo */
.text-indigo { color: var(--prm-indigo) !important; }
.bg-indigo { background-color: var(--prm-indigo) !important; }
.bg-indigo-light { background-color: var(--prm-indigo-light) !important; }
.border-indigo { border-color: var(--prm-indigo) !important; }

/* Classes utilitarias Pink (Gamificacao) */
.text-pink { color: var(--prm-pink) !important; }
.bg-pink { background-color: var(--prm-pink) !important; }
.bg-pink-light { background-color: var(--prm-pink-light) !important; }
.border-pink { border-color: var(--prm-pink) !important; }