/*
 * AS CORES DO ZEN HUB — o protótipo de 31/10 (demanda0411), manual da marca do
 * ecossistema: azul-noite #00101E, azul-claro #E5EEEF, Poppins.
 *
 * Valem dentro de `.marca-hub` (o Hub, o login e as telas de conta). O
 * ZenBusiness continua na direção "Clareira" (ADR-0107): cada produto usa as
 * cores do próprio manual, e o que é comum a todos é o DESENHO (barra de cima,
 * botão Zen), não a paleta.
 *
 * O tema segue o mesmo `data-tema` do <html> que o `tema.js` já troca: sem
 * escolha gravada, o do sistema. Os dois blocos escuros são IDÊNTICOS.
 */
.marca-hub {
    --hub-bg: #f5f8f8;
    --hub-surface: #ffffff;
    --hub-tint: #e5eeef;
    --hub-ink: #00101e;
    --hub-muted: #4a5a66;
    --hub-line: #dfe7e8;
    --hub-line2: #c9d5d7;
    --hub-hover: #eef3f4;
    --hub-btn: #00101e;
    --hub-btnink: #ffffff;
    --hub-foco: #3a51f6;
    --hub-verde: #04df81;
    --hub-verde-escuro: #01624c;
    --hub-sombra: 0 1px 3px rgba(0, 16, 30, 0.18), 0 8px 24px rgba(0, 16, 30, 0.16);
    --hub-raio: 20px;
    --hub-logo: url('/marca/zenhub.svg');
    background: var(--hub-bg);
    color: var(--hub-ink);
    font-family:
        Poppins,
        system-ui,
        -apple-system,
        'Segoe UI',
        Arial,
        sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema='claro']) .marca-hub {
        --hub-bg: #00101e;
        --hub-surface: #0a1c2c;
        --hub-tint: #12283d;
        --hub-ink: #e5eeef;
        --hub-muted: #9fb1bd;
        --hub-line: #1b3247;
        --hub-line2: #2b4660;
        --hub-hover: #14293e;
        --hub-btn: #e5eeef;
        --hub-btnink: #00101e;
        --hub-logo: url('/marca/zenhub-escuro.svg');
    }
}

:root[data-tema='escuro'] .marca-hub {
    --hub-bg: #00101e;
    --hub-surface: #0a1c2c;
    --hub-tint: #12283d;
    --hub-ink: #e5eeef;
    --hub-muted: #9fb1bd;
    --hub-line: #1b3247;
    --hub-line2: #2b4660;
    --hub-hover: #14293e;
    --hub-btn: #e5eeef;
    --hub-btnink: #00101e;
    --hub-logo: url('/marca/zenhub-escuro.svg');
}