/* ===== base =====
   Tipos de letra, tokens do tema e sobreposições ao Bootstrap; os outros contam com estas variáveis. */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/Poppins-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/Poppins-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/Poppins-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/Poppins-Bold.woff2') format('woff2');
}

/* O manuscrito da frase do ecrã de entrada e mais nada. Subconjunto latino do Caveat (OFL),
   alojado aqui como o Poppins: a dashboard não pede tipos de letra à rede. */
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/Caveat-Medium.woff2') format('woff2');
}

/* ===== a paleta da marca =====
   A identidade, e não o tema: é o bloco de baixo que a liga aos nomes do Bootstrap. */
:root {
    --brand: #0b163f;
    --brand-rgb: 11, 22, 63;
    --brand-hover: #091233;
    --brand-active: #08102d;
    --brand-emphasis: #070d26;
    --brand-emphasis-rgb: 7, 13, 38;
    /* Os subtis são o navy diluído e não um cinzento: mantêm o tom, tiram saturação. */
    --brand-subtle: #dde3f0;
    --brand-subtle-hover: #d0d8ea;
    --brand-subtle-active: #c3cde4;
    --brand-subtle-border: #b3bfda;
    /* A barra de navegação e mais nada. Separada do `--brand` porque divergem no escuro: o
       `--brand` sobe de luminosidade para se ver, e a barra que suba com ele vira faixa. */
    --brand-bar: #0b163f;
    /* O texto sobre o navy, por nome e não `#fff`: no escuro deixa de o ser. O par em RGB
       serve as camadas translúcidas da barra, que são tons desta cor e não do branco. */
    --brand-on: #fff;
    --brand-on-rgb: 255, 255, 255;
}

/* ===== o mesmo navy, no escuro =====
   O navy sobe de luminosidade e a ênfase passa a ser o tom claro, como nos `-text-emphasis`. */
[data-bs-theme="dark"] {
    --brand: #3f6fe0;
    --brand-rgb: 63, 111, 224;
    --brand-hover: #4b79e8;
    --brand-active: #5885f0;
    --brand-emphasis: #a8c0f8;
    --brand-emphasis-rgb: 168, 192, 248;
    --brand-subtle: #16223d;
    --brand-subtle-hover: #1c2a4a;
    --brand-subtle-active: #223257;
    --brand-subtle-border: #2b3b63;
    /* A barra desce em vez de subir: continua navy, e é a página que se afunda por baixo. */
    --brand-bar: #131d33;
}

/* ===== as superfícies do escuro =====
   O `<body>` veste `bg-body-tertiary` e um cartão pede o `body-bg`: o terciário é o chão. */
[data-bs-theme="dark"] {
    --bs-body-bg: #1a2438;
    --bs-body-bg-rgb: 26, 36, 56;
    --bs-body-color: #e6e9f2;
    --bs-body-color-rgb: 230, 233, 242;
    --bs-emphasis-color: #f2f4fa;
    --bs-secondary-color: rgba(230, 233, 242, .68);
    --bs-secondary-bg: #121a2b;
    --bs-secondary-bg-rgb: 18, 26, 43;
    --bs-tertiary-color: rgba(230, 233, 242, .45);
    --bs-tertiary-bg: #0a0f1a;
    --bs-tertiary-bg-rgb: 10, 15, 26;
    --bs-border-color: #26314b;
    --bs-border-color-translucent: rgba(255, 255, 255, .1);
}

/* ===== o SweetAlert =====
   O tema `bootstrap-5` traz as cores de fábrica; o `body` no selector ganha ao ficheiro do tema. */
body[data-swal2-theme] {
    --swal2-background: var(--bs-body-bg);
    --swal2-color: var(--bs-body-color);
    --swal2-border: 1px solid var(--bs-border-color);
    --swal2-toast-border: 1px solid var(--bs-border-color);
    --swal2-confirm-button-background-color: var(--brand);
    --swal2-confirm-button-color: var(--brand-on);
    --swal2-action-button-focus-box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25);
}

/* ===== a escala tipográfica =====
   O `--fs-body` é o próprio `--bs-body-font-size`, e não uma cópia. */
:root {
    --fs-micro: .625rem;
    --fs-label: .6875rem;
    --fs-sm: .8125rem;
    --fs-body: var(--bs-body-font-size);
    --fs-lg: 1.0625rem;
    --fs-xl: 1.4rem;
}

/* ===== o tecto de leitura =====
   Limita-se o conteúdo e não a moldura: a barra e o fundo continuam de ponta a ponta. */
:root {
    --content-max: 100rem;
}

:root,
[data-bs-theme="light"] {
    --bs-body-font-size: .875rem;
    --bs-primary: var(--brand);
    --bs-primary-rgb: var(--brand-rgb);
    --bs-primary-text-emphasis: var(--brand-emphasis);
    --bs-primary-bg-subtle: var(--brand-subtle);
    --bs-primary-border-subtle: var(--brand-subtle-border);
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: var(--brand-rgb);
    --bs-link-hover-color: var(--brand-emphasis);
    --bs-link-hover-color-rgb: var(--brand-emphasis-rgb);
    --bs-focus-ring-color: rgba(var(--brand-rgb), .25);
}

/* O `.text-secondary` do Bootstrap lê o `--bs-secondary-rgb`, fixo nos dois temas: aponta-se
   a classe ao token, com o `!important` que a regra do Bootstrap já traz. */
.text-secondary {
    color: var(--bs-secondary-color) !important;
}

.btn-primary {
    --bs-btn-color: var(--brand-on);
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: var(--brand-on);
    --bs-btn-hover-bg: var(--brand-hover);
    --bs-btn-hover-border-color: var(--brand-active);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
    --bs-btn-active-color: var(--brand-on);
    --bs-btn-active-bg: var(--brand-active);
    --bs-btn-active-border-color: var(--brand-emphasis);
    --bs-btn-disabled-color: var(--brand-on);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}

/* ===== a base do telemóvel =====
   Só o que os utilitários não fazem: não há `fs-sm-*` nem tamanho de botão por breakpoint. */
@media (max-width: 575.98px) {
    /* Menos de 16px faz o Safari do iPhone dar zoom ao focar, e não volta atrás. O par com
       `input-group-sm` está cá porque o Bootstrap serve esse caso com dois selectores. */
    .form-control,
    .form-select,
    .input-group-sm > .form-control,
    .input-group-sm > .form-select {
        font-size: 1rem;
    }

    /* 44px é o alvo de toque mínimo, e os botões desta página são quase todos `btn-sm`,
       que dá 31. O texto continua pequeno; o que cresce é a área de toque, também a dos campos. */
    .btn,
    .form-control,
    .form-select,
    .input-group-sm > .form-control,
    .input-group-sm > .form-select,
    .input-group-sm > .input-group-text {
        min-height: 44px;
    }

    /* Um cartão que só serve de moldura em ecrã largo. O padding sai por `p-0 p-sm-3` na
       marcação; a borda e o fundo vêm cá ter porque não há `border-sm` nem `bg-sm-*`. */
    .card-flush-sm {
        border: 0;
        background: transparent;
    }

}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: var(--brand-on);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
    --bs-btn-active-color: var(--brand-on);
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-border-color: var(--brand);
    --bs-btn-disabled-color: var(--brand);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--brand);
}

/* O botão discreto da casa pede os tokens das superfícies em vez do `#6c757d` fixo, e o activo
   troca o preenchimento cheio por um realce. */
.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--bs-secondary-color);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--bs-secondary-color);
    --bs-btn-disabled-color: var(--bs-tertiary-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-border-color);
}

/* O destrutivo que se repete por linha: neutro em repouso, vermelho ao ser apontado ou
   focado. O que aparece uma vez no ecrã não leva isto. */
.btn-quiet-danger {
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-border-color: var(--bs-border-color);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--brand);
    border-color: var(--brand);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--brand);
}

/* Um separador em repouso é texto, não uma ligação: o `--bs-nav-link-color` vem do `--brand`,
   que no escuro é acento. O activo continua na marca. */
.nav-pills .nav-link {
    --bs-nav-link-color: var(--bs-body-color);
    --bs-nav-link-hover-color: var(--bs-emphasis-color);
}

.pagination {
    --bs-pagination-active-bg: var(--brand);
    --bs-pagination-active-border-color: var(--brand);
}

.list-group {
    --bs-list-group-active-bg: var(--brand);
    --bs-list-group-active-border-color: var(--brand);
}

.list-group-item-primary {
    --bs-list-group-color: var(--brand-emphasis);
    --bs-list-group-bg: var(--brand-subtle);
    --bs-list-group-border-color: var(--brand-subtle-border);
    --bs-list-group-action-hover-color: var(--brand-emphasis);
    --bs-list-group-action-hover-bg: var(--brand-subtle-hover);
    --bs-list-group-action-active-color: var(--brand-emphasis);
    --bs-list-group-action-active-bg: var(--brand-subtle-active);
    --bs-list-group-active-color: var(--brand-on);
    --bs-list-group-active-bg: var(--brand);
    --bs-list-group-active-border-color: var(--brand);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--brand);
}

body {
    font-family: 'Poppins', sans-serif;
}