:root {
    --app-font-family: "IBM Plex Sans", sans-serif;
    --bs-font-sans-serif: var(--app-font-family);
    --bs-body-font-family: var(--app-font-family);
    --app-page-title-size: 28px;
    --app-page-title-weight: 600;
    --app-page-header-gap: 3rem;
    --app-form-label-weight: 400;
    --app-form-section-weight: 500;
    --app-button-label-weight: 500;
    --app-save-button-height: 42px;
}

/* Mesmo recuo superior de Colaboradores/index, inclusive nos layouts de chat. */
@layer app-page-spacing {
    .app-page-shell,
    .empresa-chat-page,
    .chat-page-shell {
        padding-top: var(--app-page-header-gap) !important;
    }

    #page-title .page-header,
    .empresa-dashboard__header h1,
    .empresa-chat-page__title,
    .chat-page-title {
        margin-top: 0 !important;
        line-height: 1.2 !important;
    }
}

/* Altura do botao Novo dependente, compartilhada por todos os paineis.
   A camada prevalece sobre alturas !important dos estilos de cada pagina. */
@layer app-save-buttons {
    .app-save-button {
        box-sizing: border-box !important;
        height: var(--app-save-button-height) !important;
        min-height: var(--app-save-button-height) !important;
        max-height: var(--app-save-button-height) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: normal !important;
    }
}

body,
button,
input,
select,
textarea {
    font-family: var(--app-font-family);
}

/* Mesmo tamanho do titulo de Solicitacoes (2rem com raiz de 14px). */
#page-title .page-header,
.app-page-title,
.empresa-dashboard__header h1,
.empresa-chat-page__title,
.chat-page-title,
.avisos-page__title,
.vacancy-view__title {
    font-size: var(--app-page-title-size) !important;
    font-weight: var(--app-page-title-weight) !important;
}

/* Cadastro, edicao e perfil nos tres paineis, incluindo seus modais. */
.app-form-page #page-content label,
.app-form-page #page-content .form-label,
.app-form-page #page-content .control-label {
    font-weight: var(--app-form-label-weight) !important;
}

.app-form-page #page-content :is(h2, h3, h4, h5, h6, legend):not(.app-page-title):not(.page-header),
.app-form-page #page-content .modal-header > span {
    font-weight: var(--app-form-section-weight) !important;
}

.app-form-page #page-content :is(label, .form-label, .control-label, h2, h3, h4, h5, h6, legend) :is(strong, b) {
    font-weight: inherit !important;
}

/* A camada garante o padrao mesmo diante de pesos !important das paginas.
   Apenas textos sao alterados: fontes de icones mantem seu proprio peso. */
@layer app-button-typography {
    :is(button, input[type="submit"], input[type="button"], input[type="reset"],
        .btn, [role="button"], a[class*="btn-"], a[class*="__button"],
        a[class*="__action"], a[class*="__save"], .empresa-colaboradores-action,
        .vacancy-view__share, .downloads-log-export, .pagination-system__page) {
        font-weight: var(--app-button-label-weight) !important;
    }

    :is(button, .btn, [role="button"], a[class*="btn-"], a[class*="__button"],
        a[class*="__action"], a[class*="__save"], .empresa-colaboradores-action,
        .vacancy-view__share, .downloads-log-export)
        :is(span, strong, b, label):not(.fa, .fas, .far, .fab, [class*="fa-"], .material-icons) {
        font-weight: var(--app-button-label-weight) !important;
    }
}