/*
 * Base global dos sites.
 * Cores e fonte vêm da configuração do site.
 * Os templates podem alterar estrutura, espaçamento e acabamento, mas não a identidade visual.
 */

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    min-width: 320px;
    overflow-x: hidden;
}

.site-template,
.site-template *,
.site-template *::before,
.site-template *::after {
    box-sizing: border-box;
}

.site-template {
    --site-cor-primaria: #176b78;
    --site-cor-secundaria: #e8f3f1;
    --site-cor-destaque: #b98a50;
    --site-cor-fundo: #ffffff;
    --site-cor-texto: #21343c;
    --site-fonte: Arial, Helvetica, sans-serif;
    --site-fonte-ui: var(--site-fonte);

    --site-cor-texto-suave: color-mix(
        in srgb,
        var(--site-cor-texto) 68%,
        var(--site-cor-fundo)
    );
    --site-cor-borda: color-mix(
        in srgb,
        var(--site-cor-texto) 14%,
        var(--site-cor-fundo)
    );
    --site-cor-superficie: var(--site-cor-fundo);
    --site-cor-superficie-alt: color-mix(
        in srgb,
        var(--site-cor-secundaria) 42%,
        var(--site-cor-fundo)
    );
    --site-sombra: 0 12px 32px color-mix(
        in srgb,
        var(--site-cor-texto) 10%,
        transparent
    );
    --site-raio: 14px;
    --site-container: 1180px;

    min-height: 100vh;
    background: var(--site-cor-fundo);
    color: var(--site-cor-texto);
    font-family: var(--site-fonte);
    font-size: 16px;
    line-height: 1.6;
}

.site-template img {
    max-width: 100%;
    height: auto;
}

.site-template a {
    text-decoration: none;
    font-family: inherit;
}

.site-template button,
.site-template input,
.site-template select,
.site-template textarea {
    font-family: inherit;
}

/*
 * Diferenças estruturais dos templates.
 * Não definir cores ou famílias tipográficas aqui.
 */

.site-template.site-template-padrao,
.site-template[data-template="PADRAO"] {
    --site-raio: 14px;
    --site-container: 1180px;
    line-height: 1.6;
}

.site-template.site-template-minimalista,
.site-template[data-template="MINIMALISTA"] {
    --site-raio: 0px;
    --site-container: 1120px;
    line-height: 1.7;
}

.site-template.site-template-elegante,
.site-template[data-template="ELEGANTE"] {
    --site-raio: 4px;
    --site-container: 1200px;
    line-height: 1.7;
}