:root {
    --azul: #006b84;
    --azul-escuro: #003b4d;
    --ciano: #e9553d;
    --fundo: #f5f8fa;
    --texto: #12313c;
    --muted: #6b7f88;
    --borda: #dce8ec;
    --branco: #fff;
    --brand-soft: #eaf5f7;
    --surface-2: #f5f9fa;
    --verde: #006b84;
    --amarelo: #e9553d;
    --sombra: 0 8px 26px rgba(0, 59, 77, .08);
}

:root[data-theme=dark] {
    --azul: #71c5d5;
    --azul-escuro: #f0fbfd;
    --ciano: #ff8a75;
    --fundo: #111b20;
    --texto: #edf9fb;
    --muted: #a4bac1;
    --borda: #304951;
    --branco: #18262c;
    --brand-soft: #203f48;
    --surface-2: #1d3037;
    --verde: #71c5d5;
    --amarelo: #ff8a75;
    --sombra: 0 8px 26px rgba(0, 0, 0, .2);
}

.botao.primario {
    background: #e9553d;
    box-shadow: 0 8px 18px rgba(233, 85, 61, .2);
}

.botao.primario:hover {
    background: #d94832;
}

.auth-painel,
.registro-painel,
.admin-auth-painel {
    background: radial-gradient(ellipse at 90% 5%, rgba(233, 85, 61, .38), transparent 55%),
        linear-gradient(145deg, #003b4d, #006b84);
}

.marca-sinal {
    background: linear-gradient(135deg, #e9553d, #ff8a75);
    box-shadow: 0 5px 14px rgba(233, 85, 61, .25);
}

.icone.verde,
.tipo.recorrente {
    background: var(--brand-soft);
    color: var(--azul);
}

.badge.ativo,
.badge.pago,
.badge.resolvido,
.badge.concluido {
    background: var(--brand-soft);
    color: var(--azul);
}

.alerta-sucesso {
    color: var(--azul-escuro);
    background: var(--brand-soft);
    border-color: #b9dfe6;
}

.portal-brand img {
    width: 120px;
    height: auto;
    display: block;
}

.portal-brand > span {
    margin-left: -4px;
}

.marca-logo {
    display: block;
    width: 160px;
    height: auto;
}