/*
 * Tema "Pipa CRM" (proposta 2 "Rabiola"): carregado depois do style.css quando a marca tem tema_css = 'pipa'.
 * Só troca variáveis e o formato de alguns componentes: nenhuma tela ou regra de negócio muda.
 * Paleta: coral #FF5A5F (principal), sol #FFC53D (destaque), mar #0FA89A (sucesso), berinjela #2B1D45 (textos), areia #FFF8EF / branco (fundos).
 * Fontes (self-hosted, licença OFL): Bricolage Grotesque (títulos) e Figtree (textos).
 */
@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('../../fonts/pipa/bricolage-grotesque-latin.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Figtree';
    src: url('../../fonts/pipa/figtree-latin.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --fonte-corpo: 'Figtree', system-ui, -apple-system, sans-serif;
    --fonte-titulo: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;

    /* Principal: derivado da cor da empresa (ou do coral, que é o padrão), então qualquer cor escolhida continua combinando */
    --cor-primaria: #FF5A5F;
    --cor-primaria-escura: color-mix(in srgb, var(--cor-primaria) 72%, black);
    --cor-primaria-suave: color-mix(in srgb, var(--cor-primaria) 14%, white);

    --bg: #FFF8EF;
    --superficie: #FFFFFF;
    --borda: #EDE2D2;
    --texto: #2B1D45;
    --texto-secundario: #6B5E7E;
    --texto-terciario: #8C809C;

    --sucesso: #0B7F74;
    --sucesso-suave: #D5F3EF;
    --alerta: #8A5A00;
    --alerta-suave: #FFF1C9;
    --perigo: #B8292F;
    --perigo-suave: #FFE3E3;
    --info: #5B3FA8;
    --info-suave: #EEE8FA;

    --raio: 22px;
    --raio-pequeno: 12px;
    --sombra: 0 1px 2px rgba(43, 29, 69, 0.05), 0 2px 8px rgba(43, 29, 69, 0.06);
    --sombra-elevada: 0 8px 24px rgba(43, 29, 69, 0.14);

    /* Superfícies escuras (rodapé público, cartão do guia) */
    --marca-escura: #2B1D45;
    --marca-escura-apoio: #CFC4E3;
    --marca-escura-texto: #FFF8EF;
    --rodape-fundo: #2B1D45;
    --rodape-texto: #CFC4E3;
    --rodape-linha: #44345F;
}

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; }

/* Botões em pílula: o principal é berinjela (como "Entrar" e "+ Nova tarefa" da proposta); o coral fica para destaques */
.btn { border-radius: 999px; font-weight: 700; }
.btn-primario { background: #2B1D45; color: #FFF8EF; }
.btn-primario:hover { background: #3C2B5E; filter: none; }
.btn-secundario { background: transparent; color: #2B1D45; border: 2px solid #2B1D45; }
.btn-secundario:hover { background: #2B1D45; color: #FFF8EF; filter: none; }
.btn-perigo { color: #fff; }
.btn-sm { padding: .35rem .85rem; }

.badge { border-radius: 999px; font-weight: 700; }
.cartao { border-color: #F0E6D8; }

/* Menu lateral: item ativo em coral suave com texto berinjela */
.sidebar-nav a.ativo { background: var(--cor-primaria-suave); color: #2B1D45; font-weight: 700; }
.sidebar-nav a.ativo .icone, .sidebar-nav a:hover .icone { color: var(--cor-primaria-escura); }

/* Campos mais arredondados, no mesmo espírito dos cartões */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="tel"], input[type="url"], select, textarea {
    border-radius: 12px;
}