:root {
    --cor-fundo: #f5f8fc;
    --cor-superficie: #ffffff;
    --cor-superficie-secundaria: #f0f5fb;
    --cor-borda: #dfe8f3;
    --cor-texto: #10203a;
    --cor-texto-secundario: #6d7f97;
    --cor-primaria: #1473e6;
    --cor-primaria-hover: #0d5fc2;
    --cor-primaria-suave: #e8f2ff;
    --cor-sucesso: #1fbb73;
    --cor-sucesso-suave: #e9f8f1;
    --cor-alerta: #f2a91f;
    --cor-roxo: #7d5ce7;
    --sombra-cartao: 0 8px 28px rgba(34, 65, 110, 0.08);
    --raio-pequeno: 10px;
    --raio-medio: 16px;
    --raio-grande: 22px;
    --largura-menu: 248px;
    --altura-cabecalho: 86px;
    --transicao-curta: 180ms ease;

    /* Mesma escala para separar controles, cartões e seções em todas as telas. */
    --espaco-pequeno: 8px;
    --espaco-controle: 12px;
    --espaco-padrao: 16px;
    --espaco-painel: 24px;
    --espaco-secao: 32px;
    --espaco-amplo: 48px;
    --recuo-pagina: var(--espaco-secao);
    --recuo-cartao: var(--espaco-painel);
    --largura-conteudo: 1320px;
}

/* Reduz apenas os recuos; a hierarquia dos espaçamentos permanece a mesma. */
@media (max-width: 980px) {
    :root { --recuo-pagina: var(--espaco-painel); }
}
@media (max-width: 720px) {
    :root {
        --recuo-pagina: var(--espaco-padrao);
        --recuo-cartao: var(--espaco-padrao);
    }
}

:root[data-tema="escuro"] {
    --cor-fundo: #0f1724;
    --cor-superficie: #172233;
    --cor-superficie-secundaria: #1e2b3e;
    --cor-borda: #2d3b50;
    --cor-texto: #f2f6fb;
    --cor-texto-secundario: #a7b4c5;
    --cor-primaria: #4e9cff;
    --cor-primaria-hover: #70adff;
    --cor-primaria-suave: #17375d;
    --cor-sucesso: #3bd38b;
    --cor-sucesso-suave: #173c30;
    --cor-alerta: #f0b84a;
    --cor-roxo: #9c83f4;
    --sombra-cartao: 0 10px 30px rgba(0, 0, 0, 0.22);
}