/* ==========================================================
   ESPINDOLA CONSULTORIA
   BASE GLOBAL DO SISTEMA
========================================================== */


/* ==========================================================
   DESIGN TOKENS
========================================================== */

:root {

    /* ------------------------------------------------------
       CORES INSTITUCIONAIS
    ------------------------------------------------------ */

    --cor-primaria: #173f50;
    --cor-primaria-hover: #123542;

    --cor-secundaria: #33745f;
    --cor-secundaria-hover: #28624f;
        /* ------------------------------------------------------
       IDENTIDADE VISUAL DO PAINEL
    ------------------------------------------------------ */

    --cor-painel-primaria: #3f3f8f;
    --cor-painel-escura: #292a68;
    --cor-painel-profunda: #202052;
    --cor-painel-clara: #ededf8;

    --cor-destaque: #67b447;
    --cor-destaque-escura: #448f35;
    --cor-destaque-clara: #edf7e9;
    --cor-destaque-lima: #9cc33b;


    /* ------------------------------------------------------
       SUPERFÍCIES
    ------------------------------------------------------ */

    --cor-fundo: #f4f6f8;
    --cor-superficie: #ffffff;
    --cor-superficie-secundaria: #f8fafb;
    --cor-superficie-suave: #fafafd;


    /* ------------------------------------------------------
       TEXTO
    ------------------------------------------------------ */

    --cor-texto: #1f2933;
    --cor-texto-secundario: #66727f;
    --cor-texto-suave: #8a929c;
    --cor-texto-claro: #ffffff;


    /* ------------------------------------------------------
       BORDAS
    ------------------------------------------------------ */

    --cor-borda: #dfe5e9;
    --cor-borda-forte: #cbd3d9;


    /* ------------------------------------------------------
       ESTADOS
    ------------------------------------------------------ */

    --cor-sucesso: #33745f;
    --cor-sucesso-fundo: #edf7f2;

    --cor-alerta: #b7791f;
    --cor-alerta-fundo: #fff8e8;

    --cor-erro: #b42318;
    --cor-erro-fundo: #fff5f5;


    /* ------------------------------------------------------
       TIPOGRAFIA
    ------------------------------------------------------ */

    --fonte-principal:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;


    /* ------------------------------------------------------
       ESPAÇAMENTOS
    ------------------------------------------------------ */

    --espaco-1: 4px;
    --espaco-2: 8px;
    --espaco-3: 12px;
    --espaco-4: 16px;
    --espaco-5: 24px;
    --espaco-6: 32px;
    --espaco-7: 48px;


    /* ------------------------------------------------------
       RAIOS
    ------------------------------------------------------ */

    --raio-pequeno: 6px;
    --raio-medio: 10px;
    --raio-grande: 16px;


    /* ------------------------------------------------------
       SOMBRAS
    ------------------------------------------------------ */

    --sombra-leve:
        0 2px 8px rgba(20, 38, 58, 0.06);

    --sombra-media:
        0 10px 30px rgba(20, 38, 58, 0.10);

    --sombra-elevada:
        0 18px 48px rgba(20, 38, 58, 0.14);


    /* ------------------------------------------------------
       TRANSIÇÕES
    ------------------------------------------------------ */

    --transicao-rapida: 120ms ease;
    --transicao-padrao: 180ms ease;


    /* ------------------------------------------------------
       LAYOUT
    ------------------------------------------------------ */

    --largura-conteudo: 1440px;
}


/* ==========================================================
   RESET GLOBAL
========================================================== */

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


html {
    min-width: 0;

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


body {
    margin: 0;

    min-width: 0;
    min-height: 100vh;

    font-family: var(--fonte-principal);
    font-size: 14px;
    line-height: 1.5;

    color: var(--cor-texto);

    background: var(--cor-fundo);
}


img {
    display: block;

    max-width: 100%;
    height: auto;
}


button,
input,
select,
textarea {
    font: inherit;
}


button {
    border: 0;
}


a {
    color: inherit;
}


/* ==========================================================
   ACESSIBILIDADE
========================================================== */

button,
a,
input,
select,
textarea {
    outline-offset: 3px;
}


:focus-visible {
    outline: 2px solid var(--cor-secundaria);
}


::selection {
    background: rgba(51, 116, 95, 0.18);
}


/* ==========================================================
   UTILITÁRIOS GLOBAIS
========================================================== */

[hidden] {
    display: none !important;
}