/* ===== FOCUSNEWS - PALETA DE CORES DO FOCUS ===== */
/* Arquivo dedicado às cores e temas do projeto Focus */
/* Integração das cores: azul, laranja, rosa e branco */

/* ===== VARIÁVEIS DE CORES DO FOCUS ===== */
:root {
    /* CORES PRIMÁRIAS DO FOCUS */
    --focus-azul-principal: #093FB4;        /* Azul principal ■ */
    --focus-laranja-principal: #ED3500;     /* Laranja principal ■ */
    --focus-rosa-principal: #FFD8D8;        /* Rosa principal ■ */
    --focus-branco-principal: #FFFCFB;      /* Branco principal ■ */
    
    /* VARIAÇÕES DO AZUL FOCUS */
    --focus-azul-escuro: #072d85;           /* Azul mais escuro ■ */
    --focus-azul-claro: #1a4fc4;           /* Azul mais claro ■ */
    --focus-azul-muito-claro: #e6eeff;     /* Azul muito claro ■ */
    --focus-azul-transparente: rgba(9, 63, 180, 0.1); /* Azul transparente ■ */
    --focus-azul-hover: rgba(9, 63, 180, 0.8);        /* Azul para hover ■ */
    
    /* VARIAÇÕES DO LARANJA FOCUS */
    --focus-laranja-escuro: #c42d00;        /* Laranja mais escuro ■ */
    --focus-laranja-claro: #ff4a1a;         /* Laranja mais claro ■ */
    --focus-laranja-muito-claro: #ffe6e0;   /* Laranja muito claro ■ */
    --focus-laranja-transparente: rgba(237, 53, 0, 0.1); /* Laranja transparente ■ */
    --focus-laranja-hover: rgba(237, 53, 0, 0.8);        /* Laranja para hover ■ */
    
    /* VARIAÇÕES DO ROSA FOCUS */
    --focus-rosa-escuro: #ffb8b8;           /* Rosa mais escuro ■ */
    --focus-rosa-claro: #ffe8e8;            /* Rosa mais claro ■ */
    --focus-rosa-muito-claro: #fff5f5;      /* Rosa muito claro ■ */
    --focus-rosa-transparente: rgba(255, 216, 216, 0.3); /* Rosa transparente ■ */
    --focus-rosa-hover: rgba(255, 216, 216, 0.6);        /* Rosa para hover ■ */
    
    /* VARIAÇÕES DO BRANCO FOCUS */
    --focus-branco-escuro: #f5f2f1;         /* Branco mais escuro ■ */
    --focus-branco-claro: #ffffff;          /* Branco puro ■ */
    --focus-branco-transparente: rgba(255, 252, 251, 0.9); /* Branco transparente ■ */
    
    /* GRADIENTES DO FOCUS */
    --focus-gradiente-principal: linear-gradient(135deg, var(--focus-azul-principal), var(--focus-laranja-principal)); /* Azul para laranja ■ */
    --focus-gradiente-invertido: linear-gradient(135deg, var(--focus-laranja-principal), var(--focus-azul-principal)); /* Laranja para azul ■ */
    --focus-gradiente-suave: linear-gradient(135deg, var(--focus-rosa-principal), var(--focus-branco-principal)); /* Rosa para branco ■ */
    --focus-gradiente-azul: linear-gradient(135deg, var(--focus-azul-claro), var(--focus-azul-escuro)); /* Gradiente azul ■ */
    --focus-gradiente-laranja: linear-gradient(135deg, var(--focus-laranja-claro), var(--focus-laranja-escuro)); /* Gradiente laranja ■ */
    
    /* SOMBRAS COM CORES DO FOCUS */
    --focus-sombra-azul-suave: 0 4px 8px rgba(9, 63, 180, 0.15);     /* Sombra azul suave ■ */
    --focus-sombra-azul-media: 0 8px 16px rgba(9, 63, 180, 0.2);     /* Sombra azul média ■ */
    --focus-sombra-azul-forte: 0 12px 24px rgba(9, 63, 180, 0.3);    /* Sombra azul forte ■ */
    --focus-sombra-laranja-suave: 0 4px 8px rgba(237, 53, 0, 0.15);  /* Sombra laranja suave ■ */
    --focus-sombra-laranja-media: 0 8px 16px rgba(237, 53, 0, 0.2);  /* Sombra laranja média ■ */
    --focus-sombra-laranja-forte: 0 12px 24px rgba(237, 53, 0, 0.3); /* Sombra laranja forte ■ */
}

/* ===== CLASSES UTILITÁRIAS DE CORES ===== */

/* CORES DE TEXTO */
.text-focus-azul { color: var(--focus-azul-principal) !important; }
.text-focus-azul-escuro { color: var(--focus-azul-escuro) !important; }
.text-focus-azul-claro { color: var(--focus-azul-claro) !important; }

.text-focus-laranja { color: var(--focus-laranja-principal) !important; }
.text-focus-laranja-escuro { color: var(--focus-laranja-escuro) !important; }
.text-focus-laranja-claro { color: var(--focus-laranja-claro) !important; }

.text-focus-rosa { color: var(--focus-rosa-escuro) !important; }
.text-focus-branco { color: var(--focus-branco-principal) !important; }

/* CORES DE FUNDO */
.bg-focus-azul { background-color: var(--focus-azul-principal) !important; }
.bg-focus-azul-escuro { background-color: var(--focus-azul-escuro) !important; }
.bg-focus-azul-claro { background-color: var(--focus-azul-claro) !important; }
.bg-focus-azul-muito-claro { background-color: var(--focus-azul-muito-claro) !important; }
.bg-focus-azul-transparente { background-color: var(--focus-azul-transparente) !important; }

.bg-focus-laranja { background-color: var(--focus-laranja-principal) !important; }
.bg-focus-laranja-escuro { background-color: var(--focus-laranja-escuro) !important; }
.bg-focus-laranja-claro { background-color: var(--focus-laranja-claro) !important; }
.bg-focus-laranja-muito-claro { background-color: var(--focus-laranja-muito-claro) !important; }
.bg-focus-laranja-transparente { background-color: var(--focus-laranja-transparente) !important; }

.bg-focus-rosa { background-color: var(--focus-rosa-principal) !important; }
.bg-focus-rosa-escuro { background-color: var(--focus-rosa-escuro) !important; }
.bg-focus-rosa-claro { background-color: var(--focus-rosa-claro) !important; }
.bg-focus-rosa-muito-claro { background-color: var(--focus-rosa-muito-claro) !important; }
.bg-focus-rosa-transparente { background-color: var(--focus-rosa-transparente) !important; }

.bg-focus-branco { background-color: var(--focus-branco-principal) !important; }
.bg-focus-branco-escuro { background-color: var(--focus-branco-escuro) !important; }
.bg-focus-branco-transparente { background-color: var(--focus-branco-transparente) !important; }

/* GRADIENTES DE FUNDO */
.bg-focus-gradiente-principal { background: var(--focus-gradiente-principal) !important; }
.bg-focus-gradiente-invertido { background: var(--focus-gradiente-invertido) !important; }
.bg-focus-gradiente-suave { background: var(--focus-gradiente-suave) !important; }
.bg-focus-gradiente-azul { background: var(--focus-gradiente-azul) !important; }
.bg-focus-gradiente-laranja { background: var(--focus-gradiente-laranja) !important; }

/* CORES DE BORDA */
.border-focus-azul { border-color: var(--focus-azul-principal) !important; }
.border-focus-azul-claro { border-color: var(--focus-azul-claro) !important; }
.border-focus-laranja { border-color: var(--focus-laranja-principal) !important; }
.border-focus-laranja-claro { border-color: var(--focus-laranja-claro) !important; }
.border-focus-rosa { border-color: var(--focus-rosa-principal) !important; }
.border-focus-branco { border-color: var(--focus-branco-principal) !important; }

/* ===== COMPONENTES ESTILIZADOS COM CORES DO FOCUS ===== */

/* BOTÕES COM CORES DO FOCUS */
.btn-focus-azul {
    background-color: var(--focus-azul-principal);
    color: white;
    border: 2px solid var(--focus-azul-principal);
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: var(--focus-sombra-azul-suave);
}

.btn-focus-azul:hover {
    background-color: var(--focus-azul-escuro);
    border-color: var(--focus-azul-escuro);
    transform: translateY(-2px);
    box-shadow: var(--focus-sombra-azul-media);
    color: white;
}

.btn-focus-laranja {
    background-color: var(--focus-laranja-principal);
    color: white;
    border: 2px solid var(--focus-laranja-principal);
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: var(--focus-sombra-laranja-suave);
}

.btn-focus-laranja:hover {
    background-color: var(--focus-laranja-escuro);
    border-color: var(--focus-laranja-escuro);
    transform: translateY(-2px);
    box-shadow: var(--focus-sombra-laranja-media);
    color: white;
}

.btn-focus-gradiente {
    background: var(--focus-gradiente-principal);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: var(--focus-sombra-azul-suave);
}

.btn-focus-gradiente:hover {
    background: var(--focus-gradiente-invertido);
    transform: translateY(-2px);
    box-shadow: var(--focus-sombra-azul-media);
    color: white;
}

/* BOTÕES OUTLINE */
.btn-focus-azul-outline {
    background-color: transparent;
    color: var(--focus-azul-principal);
    border: 2px solid var(--focus-azul-principal);
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-focus-azul-outline:hover {
    background-color: var(--focus-azul-principal);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--focus-sombra-azul-suave);
}

.btn-focus-laranja-outline {
    background-color: transparent;
    color: var(--focus-laranja-principal);
    border: 2px solid var(--focus-laranja-principal);
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-focus-laranja-outline:hover {
    background-color: var(--focus-laranja-principal);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--focus-sombra-laranja-suave);
}

/* ===== CARDS COM CORES DO FOCUS ===== */
.card-focus {
    background: white;
    border: 1px solid var(--focus-azul-transparente);
    border-radius: 15px;
    padding: 25px;
    box-shadow: var(--focus-sombra-azul-suave);
    transition: all 0.3s ease;
}

.card-focus:hover {
    transform: translateY(-5px);
    box-shadow: var(--focus-sombra-azul-media);
    border-color: var(--focus-azul-claro);
}

.card-focus-azul {
    background: var(--focus-azul-muito-claro);
    border: 1px solid var(--focus-azul-claro);
    color: var(--focus-azul-escuro);
}

.card-focus-laranja {
    background: var(--focus-laranja-muito-claro);
    border: 1px solid var(--focus-laranja-claro);
    color: var(--focus-laranja-escuro);
}

.card-focus-rosa {
    background: var(--focus-rosa-muito-claro);
    border: 1px solid var(--focus-rosa-escuro);
    color: var(--focus-azul-principal);
}

/* ===== ALERTAS COM CORES DO FOCUS ===== */
.alert-focus-info {
    background-color: var(--focus-azul-muito-claro);
    border: 1px solid var(--focus-azul-claro);
    color: var(--focus-azul-escuro);
    padding: 15px 20px;
    border-radius: 8px;
    margin: 15px 0;
}

.alert-focus-warning {
    background-color: var(--focus-laranja-muito-claro);
    border: 1px solid var(--focus-laranja-claro);
    color: var(--focus-laranja-escuro);
    padding: 15px 20px;
    border-radius: 8px;
    margin: 15px 0;
}

.alert-focus-success {
    background-color: var(--focus-rosa-muito-claro);
    border: 1px solid var(--focus-rosa-escuro);
    color: var(--focus-azul-principal);
    padding: 15px 20px;
    border-radius: 8px;
    margin: 15px 0;
}

/* ===== BADGES COM CORES DO FOCUS ===== */
.badge-focus-azul {
    background-color: var(--focus-azul-principal);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
}

.badge-focus-laranja {
    background-color: var(--focus-laranja-principal);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
}

.badge-focus-rosa {
    background-color: var(--focus-rosa-principal);
    color: var(--focus-azul-principal);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
}

/* ===== LINKS COM CORES DO FOCUS ===== */
.link-focus {
    color: var(--focus-azul-principal);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.link-focus:hover {
    color: var(--focus-azul-escuro);
    text-decoration: underline;
}

.link-focus-laranja {
    color: var(--focus-laranja-principal);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.link-focus-laranja:hover {
    color: var(--focus-laranja-escuro);
    text-decoration: underline;
}

/* ===== SEPARADORES COM CORES DO FOCUS ===== */
.divider-focus {
    height: 2px;
    background: var(--focus-gradiente-principal);
    border: none;
    margin: 30px 0;
    border-radius: 1px;
}

.divider-focus-azul {
    height: 2px;
    background-color: var(--focus-azul-principal);
    border: none;
    margin: 30px 0;
    border-radius: 1px;
}

.divider-focus-laranja {
    height: 2px;
    background-color: var(--focus-laranja-principal);
    border: none;
    margin: 30px 0;
    border-radius: 1px;
}

/* ===== HOVER EFFECTS COM CORES DO FOCUS ===== */
.hover-focus-azul {
    transition: all 0.3s ease;
}

.hover-focus-azul:hover {
    background-color: var(--focus-azul-transparente);
    color: var(--focus-azul-principal);
    transform: translateY(-2px);
}

.hover-focus-laranja {
    transition: all 0.3s ease;
}

.hover-focus-laranja:hover {
    background-color: var(--focus-laranja-transparente);
    color: var(--focus-laranja-principal);
    transform: translateY(-2px);
}

.hover-focus-rosa {
    transition: all 0.3s ease;
}

.hover-focus-rosa:hover {
    background-color: var(--focus-rosa-transparente);
    color: var(--focus-azul-principal);
    transform: translateY(-2px);
}

/* ===== ANIMAÇÕES COM CORES DO FOCUS ===== */
@keyframes focus-pulse-azul {
    0% { box-shadow: 0 0 0 0 var(--focus-azul-hover); }
    70% { box-shadow: 0 0 0 10px rgba(9, 63, 180, 0); }
    100% { box-shadow: 0 0 0 0 rgba(9, 63, 180, 0); }
}

@keyframes focus-pulse-laranja {
    0% { box-shadow: 0 0 0 0 var(--focus-laranja-hover); }
    70% { box-shadow: 0 0 0 10px rgba(237, 53, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(237, 53, 0, 0); }
}

.pulse-focus-azul {
    animation: focus-pulse-azul 2s infinite;
}

.pulse-focus-laranja {
    animation: focus-pulse-laranja 2s infinite;
}

/* ===== TEMA ESCURO PARA CORES DO FOCUS ===== */
[data-theme="dark"] {
    /* Ajustes das cores do focus para tema escuro */
    --focus-azul-principal: #1a4fc4;
    --focus-laranja-principal: #ff4a1a;
    --focus-rosa-principal: #ffe8e8;
    --focus-branco-principal: #f5f2f1;
    
    --focus-azul-muito-claro: #1a2040;
    --focus-laranja-muito-claro: #2a1a10;
    --focus-rosa-muito-claro: #2a2020;
}

/* FIM DO ARQUIVO DE CORES DO FOCUS */