:root {
    /* ------------------------------------------------------------------------
       TOKENS COMUNS DOS TITULOS
       ------------------------------------------------------------------------ */
    --titulo-familia: var(--fonte-display);
    --titulo-h1-cor: var(--caixa-ui-porcelana);
    --titulo-h2-cor: var(--caixa-azul-principal);
    --titulo-h3-cor: var(--caixa-azul-principal);
    --titulo-h4-cor: var(--caixa-azul-principal);
    --titulo-h5-cor: var(--caixa-azul-principal);
    --titulo-h6-cor: var(--caixa-azul-principal);
    /* ------------------------------------------------------------------------
       CORES ALTERNATIVAS PARA H2 A H6 EM FUNDOS ESCUROS
       Os seletores continuam consumindo os tokens principais acima.
       WebParts conhecidas podem redefinir somente as variaveis, sem alterar HTML.
       ------------------------------------------------------------------------ */
    --titulo-h2-cor-invertido: var(--caixa-ui-porcelana);
    --titulo-h3-cor-invertido: var(--caixa-ui-porcelana);
    --titulo-h4-cor-invertido: var(--caixa-ui-porcelana);
    --titulo-h5-cor-invertido: var(--caixa-ui-porcelana);
    --titulo-h6-cor-invertido: var(--caixa-ui-porcelana);
    --titulo-estilo: var(--estilo-normal);
    --titulo-line-height: var(--linha-display);
    /* ------------------------------------------------------------------------
       TOKENS DE PESO
       ------------------------------------------------------------------------ */
    --titulo-h1-peso: var(--peso-extrabold);
    --titulo-h2-peso: var(--peso-bold);
    --titulo-h3-peso: var(--peso-bold);
    --titulo-h4-peso: var(--peso-medium);
    --titulo-h5-peso: var(--peso-medium);
    --titulo-h6-peso: var(--peso-medium);
    /* ------------------------------------------------------------------------
       TOKENS MOBILE
       ------------------------------------------------------------------------ */
    --titulo-h1-mobile: var(--fonte-56);
    --titulo-h2-mobile: var(--fonte-44);
    --titulo-h3-mobile: var(--fonte-36);
    --titulo-h4-mobile: var(--fonte-28);
    --titulo-h5-mobile: var(--fonte-20);
    --titulo-h6-mobile: var(--fonte-16);
    /* ------------------------------------------------------------------------
       TOKENS TABLET
       ------------------------------------------------------------------------ */
    --titulo-h1-tablet: var(--fonte-64);
    --titulo-h2-tablet: var(--fonte-48);
    --titulo-h3-tablet: var(--fonte-40);
    --titulo-h4-tablet: var(--fonte-28);
    --titulo-h5-tablet: var(--fonte-20);
    --titulo-h6-tablet: var(--fonte-16);
    /* ------------------------------------------------------------------------
       TOKENS DESKTOP
       ------------------------------------------------------------------------ */
    --titulo-h1-desktop: var(--fonte-72);
    --titulo-h2-desktop: var(--fonte-56);
    --titulo-h3-desktop: var(--fonte-44);
    --titulo-h4-desktop: var(--fonte-32);
    --titulo-h5-desktop: var(--fonte-24);
    --titulo-h6-desktop: var(--fonte-20);
}

/* ============================================================================
   REGRAS COMUNS
   ============================================================================ */

h1,
h2,
h3,
h4,
h5,
h6,
.alpha,
.beta,
.gamma,
.delta,
.epsilon,
.zeta {
    margin-top: 0;
    clear: both;
    font-family: var(--titulo-familia);
    font-style: var(--titulo-estilo);
    line-height: var(--titulo-line-height);
}

/* ============================================================================
   MOBILE
   ============================================================================ */

h1,
.alpha {
    color: var(--titulo-h1-cor);
    font-size: var(--titulo-h1-mobile);
    font-weight: var(--titulo-h1-peso);
}

h2,
.beta {
    color: var(--titulo-h2-cor);
    font-size: var(--titulo-h2-mobile);
    font-weight: var(--titulo-h2-peso);
}

h3,
.gamma {
    color: var(--titulo-h3-cor);
    font-size: var(--titulo-h3-mobile);
    font-weight: var(--titulo-h3-peso);
}

h4,
.delta {
    color: var(--titulo-h4-cor);
    font-size: var(--titulo-h4-mobile);
    font-weight: var(--titulo-h4-peso);
}

h5,
.epsilon {
    color: var(--titulo-h5-cor);
    font-size: var(--titulo-h5-mobile);
    font-weight: var(--titulo-h5-peso);
}

h6,
.zeta {
    color: var(--titulo-h6-cor);
    font-size: var(--titulo-h6-mobile);
    font-weight: var(--titulo-h6-peso);
}

/* ============================================================================
   TABLET: >= 37.5rem (600px)
   ============================================================================ */

@media screen and (min-width: 37.5rem) {
    h1,
    .alpha {
        font-size: var(--titulo-h1-tablet);
    }

    h2,
    .beta {
        font-size: var(--titulo-h2-tablet);
    }

    h3,
    .gamma {
        font-size: var(--titulo-h3-tablet);
    }

    h4,
    .delta {
        font-size: var(--titulo-h4-tablet);
    }

    h5,
    .epsilon {
        font-size: var(--titulo-h5-tablet);
    }

    h6,
    .zeta {
        font-size: var(--titulo-h6-tablet);
    }
}

/* ============================================================================
   DESKTOP: >= 62.5rem (1000px)
   ============================================================================ */

@media screen and (min-width: 62.5rem) {
    h1,
    .alpha {
        font-size: var(--titulo-h1-desktop);
    }

    h2,
    .beta {
        font-size: var(--titulo-h2-desktop);
    }

    h3,
    .gamma {
        font-size: var(--titulo-h3-desktop);
    }

    h4,
    .delta {
        font-size: var(--titulo-h4-desktop);
    }

    h5,
    .epsilon {
        font-size: var(--titulo-h5-desktop);
    }

    h6,
    .zeta {
        font-size: var(--titulo-h6-desktop);
    }
}