/* ============================================================
   MARCA.CSS — Cores da identidade visual da agencia

   Arquivo centralizado com todas as cores usadas no site.
   Para alterar a identidade visual, basta modificar as
   variaveis abaixo — todo o sistema reflete automaticamente.
   ============================================================ */

:root {

    /* ========================================
       MARCA — Cor principal e variações
       ======================================== */
    --marca-primaria:          #fe0000;
    --marca-primaria-hover:    #cc0000;
    --marca-primaria-escura:   #c40000;
    --marca-secundaria:        #017a72;

    /* Canais RGB da cor principal (usado para gerar transparências) */
    --marca-primaria-rgb:      254, 0, 0;

    /* Transparencias da cor principal */
    --marca-alpha-5:           rgba(var(--marca-primaria-rgb), 0.05);
    --marca-alpha-8:           rgba(var(--marca-primaria-rgb), 0.08);
    --marca-alpha-10:          rgba(var(--marca-primaria-rgb), 0.10);
    --marca-alpha-12:          rgba(var(--marca-primaria-rgb), 0.12);
    --marca-alpha-15:          rgba(var(--marca-primaria-rgb), 0.15);
    --marca-alpha-20:          rgba(var(--marca-primaria-rgb), 0.20);
    --marca-alpha-24:          rgba(var(--marca-primaria-rgb), 0.24);
    --marca-alpha-25:          rgba(var(--marca-primaria-rgb), 0.25);
    --marca-alpha-30:          rgba(var(--marca-primaria-rgb), 0.30);
    --marca-alpha-40:          rgba(var(--marca-primaria-rgb), 0.40);

    /* Gradientes da marca */
    --marca-gradiente:         linear-gradient(135deg, var(--marca-primaria) 0%, var(--marca-secundaria) 100%);
    --marca-gradiente-h:       linear-gradient(90deg, var(--marca-primaria), var(--marca-secundaria));

    /* ========================================
       SIDEBAR — Navegacao lateral
       ======================================== */
    --sb-bg:                   #1a1d21;
    --sb-bg-hover:             #27292d;
    --sb-bg-active:            #27292d;
    --sb-border:               rgba(255, 255, 255, 0.07);
    --sb-text:                 #c9cdd3;
    --sb-text-muted:           #7a7f87;
    --sb-text-active:          #ffffff;
    --sb-header-bg:            #111316;

    /* ========================================
       TEMA CLARO — Fundos, textos e bordas
       ======================================== */
    --bg-base:                 #f8f8f8;
    --bg-surface:              #ffffff;
    --bg-elevated:             #f2f2f2;
    --bg-subtle:               #fafafa;
    --bg-input:                #f5f5f5;
    --bg-url-box:              #f4f4f4;

    --border-light:            #e8e8e8;
    --border-lighter:          #f0f0f0;
    --border-medium:           #e5e5e5;
    --border-input:            #e0e0e0;

    --text-primary:            #1a1a1a;
    --text-secondary:          #555555;
    --text-muted:              #888888;
    --text-dark:               #333333;
    --text-gray:               #666666;
    --text-light:              #999999;

    /* ========================================
       STATUS — Sucesso, erro, aviso e info
       ======================================== */

    /* Sucesso (verde) */
    --sucesso:                 #10b981;
    --sucesso-hover:           #059669;
    --sucesso-escuro:          #047857;
    --sucesso-bg:              #d1fae5;
    --sucesso-bg-light:        #dcfce7;
    --sucesso-bg-lighter:      #ecfdf5;
    --sucesso-text:            #065f46;
    --sucesso-text-alt:        #166534;

    /* Erro (vermelho funcional — diferente da marca) */
    --erro:                    #ef4444;
    --erro-hover:              #dc2626;
    --erro-bg:                 #fee2e2;
    --erro-bg-light:           #fecaca;
    --erro-text:               #991b1b;

    /* Aviso (amarelo/laranja) */
    --aviso:                   #f59e0b;
    --aviso-hover:             #d97706;
    --aviso-bg:                #fef3c7;
    --aviso-bg-light:          #fde68a;
    --aviso-text:              #92400e;
    --aviso-badge:             #e8a020;

    /* Info (azul) */
    --info:                    #0ea5e9;
    --info-hover:              #0369a1;
    --info-escuro:             #0c4a6e;
    --info-bg:                 #f0f9ff;
    --info-bg-light:           #e0f2fe;
    --info-bg-medium:          #dbeafe;
    --info-border:             #bae6fd;
    --info-text:               #0c4a6e;

    /* ========================================
       ACOES — Botoes de editar e excluir
       ======================================== */
    --acao-editar-bg:          #e0f2fe;
    --acao-editar-cor:         #0369a1;
    --acao-excluir-bg:         #fee2e2;
    --acao-excluir-cor:        #991b1b;

    /* ========================================
       STATUS BADGES — Ativo/Inativo
       ======================================== */
    --status-ativo-bg:         #d1fae5;
    --status-ativo-text:       #065f46;
    --status-inativo-bg:       #fee2e2;
    --status-inativo-text:     #991b1b;

    /* ========================================
       TIMELINE — Tipos de interacao no CRM
       ======================================== */
    --timeline-ligacao:        #10b981;
    --timeline-email:          #3b82f6;
    --timeline-whatsapp:       #22c55e;
    --timeline-reuniao:        #8b5cf6;
    --timeline-proposta:       #f59e0b;
    --timeline-etapa:          #6366f1;
    --timeline-arquivo:        #ec4899;

    /* ========================================
       TEMPERATURA — Leads quente/morno/frio
       ======================================== */
    --temp-quente:             #ef4444;
    --temp-morno:              #f59e0b;
    --temp-frio:               #0ea5e9;

    /* ========================================
       PRIORIDADE — Alta/media/baixa
       ======================================== */
    --prioridade-alta-bg:      #fee2e2;
    --prioridade-alta-text:    #991b1b;
    --prioridade-media-bg:     #fef3c7;
    --prioridade-media-text:   #92400e;
    --prioridade-baixa-bg:     #dcfce7;
    --prioridade-baixa-text:   #166534;

    /* ========================================
       CANAIS — Marketing e aquisicao
       ======================================== */
    --canal-geral-bg:          #eef2ff;
    --canal-geral-text:        #4338ca;
    --canal-meta-bg:           #eff6ff;
    --canal-meta-text:         #1d4ed8;
    --canal-google-bg:         #fff7ed;
    --canal-google-text:       #c2410c;
    --canal-conteudo-bg:       #fdf4ff;
    --canal-conteudo-text:     #a21caf;
    --canal-landing-bg:        #ecfeff;
    --canal-landing-text:      #0f766e;
    --canal-whatsapp-bg:       #ecfdf5;
    --canal-whatsapp-text:     #15803d;
    --canal-seo-bg:            #f0fdf4;
    --canal-seo-text:          #166534;
    --canal-analytics-bg:      #fefce8;
    --canal-analytics-text:    #a16207;

    /* ========================================
       TIPOS DE ACESSO
       ======================================== */
    --acesso-site:             #3b82f6;
    --acesso-servidor:         #8b5cf6;
    --acesso-email:            #ef4444;
    --acesso-rede-social:      #ec4899;
    --acesso-outro:            #6b7280;

    /* ========================================
       SOCIAL — Cores de plataformas externas
       ======================================== */
    --cor-facebook:            #1877F2;
    --cor-google:              #1a73e8;
    --cor-whatsapp:            #22c55e;
    --cor-instagram:           #fe0000;

    /* ========================================
       UTILITARIOS — Sombras e overlays
       ======================================== */
    --sombra-xs:               rgba(0, 0, 0, 0.04);
    --sombra-sm:               rgba(0, 0, 0, 0.06);
    --sombra-md:               rgba(0, 0, 0, 0.10);
    --sombra-lg:               rgba(0, 0, 0, 0.18);
    --sombra-xl:               rgba(0, 0, 0, 0.25);
    --overlay:                 rgba(0, 0, 0, 0.50);
}

/* ========================================
   TEMA ESCURO — Overrides para dark mode
   ======================================== */
[data-theme="dark"],
.dark-theme {
    --bg-base:                 #0f1117;
    --bg-surface:              #1a1d23;
    --bg-elevated:             #222630;
    --border-light:            rgba(255, 255, 255, 0.08);
    --text-primary:            #e8eaf0;
    --text-secondary:          #9da3b0;
    --text-muted:              #6b7280;

    --sb-bg:                   #0f1117;
    --sb-bg-hover:             #1a1d23;
    --sb-bg-active:            #222630;
    --sb-header-bg:            #080b0f;
    --sb-border:               rgba(255, 255, 255, 0.06);
}