/* ==========================================================================
   tipografia-sb.css — Tipografia e identidade visual SiestaBOX (v3.x)
   --------------------------------------------------------------------------
   Folha ADITIVA com escopo opt-in. Nenhuma regra desta folha pinta nada fora
   de um ancestral com a classe `.sb-tipo`. Fora do escopo: zero alteração de
   render e zero download de fonte (o navegador só baixa um @font-face quando
   algum elemento renderizado o referencia).

   Referências: docs/IDENTIDADE_VISUAL_SIESTABOX.md ·
   docs/LEVANTAMENTO_TIPOGRAFIA_IDENTIDADE_VISUAL_2026-09-11.md
   Base do documento: html { font-size: 62.5% } → 1rem = 10px. Nunca copiar
   valores em base 16px sem multiplicar por 1,6.
   Nomenclatura reservada (§2.6): classe `sb-tipo*`, tokens `--sbt-*`.
   Criado em 2026-09-11.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fontes
   `Inter SB` e não `Inter`: o @import do Google Fonts em system2026.css:14 já
   registra a família `Inter`; declarar a mesma família criaria conflito de
   faces. Sem local(): os nomes instalados são incertos e Safari/Firefox
   restringem local() por anti-fingerprinting.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Inter SB";
    src: url("../font/Inter-VariableFont_slnt,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Fonte de títulos. Licença web da Moretype pendente de confirmação:
   enquanto não confirmada, trocar --sbt-font-display para "Inter SB" (peso 800). */
@font-face {
    font-family: "Mic 32 New Rounded";
    src: url("../font/moretype-Mic32NewRounded-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens — inertes até serem consumidos por uma regra sob .sb-tipo
   (N) = norma do Manual da Marca 2abad 2014 · demais = decisão/inferência
   -------------------------------------------------------------------------- */
:root {
    /* Cor (N) */
    --sbt-ciano: #00AEEF;
    --sbt-branco: #FFFFFF;
    /* Cor de interface */
    --sbt-ciano-escuro: #0090c8;   /* texto ciano sobre branco: 3,6:1, só texto grande */
    --sbt-ciano-suave: #eaf7fd;
    --sbt-tinta: #211e1c;          /* 16,6:1 sobre branco · 6,6:1 sobre ciano */
    --sbt-corpo: #516171;          /* 6,4:1 sobre branco */
    --sbt-tenue: #868e96;          /* 3,3:1 — só texto grande ou caps bold ≥ 19px */
    --sbt-linha: #e7ebee;

    /* Tipografia */
    --sbt-font-display: "Mic 32 New Rounded", "Inter SB", "Segoe UI", Arial, sans-serif;
    --sbt-font-body: "Inter SB", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --sbt-fs-display: clamp(4rem, 3rem + 2vw, 6.4rem);   /* 40–64px */
    --sbt-fs-h1: clamp(3.2rem, 2.4rem + 1.6vw, 4rem);    /* 32–40px */
    --sbt-fs-h2: clamp(2.6rem, 2rem + 1.2vw, 3.2rem);    /* 26–32px */
    --sbt-fs-h3: 2.5rem;
    --sbt-fs-h4: 2rem;
    --sbt-fs-h5: 1.8rem;
    --sbt-fs-h6: 1.6rem;
    --sbt-fs-lead: 2rem;
    --sbt-fs-body: 1.6rem;
    --sbt-fs-small: 1.4rem;
    --sbt-fs-caps: 1.2rem;
    --sbt-fs-caps-lg: 1.4rem;      /* kicker de hero, acima do h1 */
    --sbt-fs-nav: 1.6rem;

    --sbt-lh-display: 1.1;
    --sbt-lh-heading: 1.2;
    --sbt-lh-body: 1.5;            /* WCAG 1.4.12 */

    --sbt-ls-caps: 0.18em;         /* eco do "BOX" em Futura Bold caixa alta */
    --sbt-ls-heading: -0.01em;

    --sbt-fw-display: 700;
    --sbt-fw-body: 400;
    --sbt-fw-medium: 500;
    --sbt-fw-semibold: 600;

    /* Forma — eco do box de cantos arredondados (proporção N) */
    --sbt-raio: 12px;
    --sbt-raio-cartao: 18px;
    --sbt-raio-pilula: 999px;
}

/* --------------------------------------------------------------------------
   3. Escopo — tudo abaixo exige um ancestral .sb-tipo

   A âncora de escopo vai dentro de :where(), que tem especificidade ZERO
   (Selectors 4 §16). Assim uma regra de elemento fica em (0,0,1):
     - VENCE o seletor nu do legado — h1..h6 {font-family}, p {font-family} e o
       color:#fff vazado de system2026.css:1128 — por empate + ordem (esta folha
       carrega depois);
     - PERDE para qualquer classe do partial (0,1,0), inclusive o CSS local que
       cada seção define no próprio <style>.
   É o contrato de uma folha aditiva: define o padrão, não atropela decisão local.
   Os modificadores .sb-tipo-* mantêm âncora de classe, pois são aplicados
   deliberadamente e devem ter peso.
   -------------------------------------------------------------------------- */
.sb-tipo {
    font-family: var(--sbt-font-body);
    font-weight: var(--sbt-fw-body);
    line-height: var(--sbt-lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Títulos: família de display, peso único 700 (a Mic 32 só existe em Bold) */
:where(.sb-tipo) h1,
:where(.sb-tipo) h2,
:where(.sb-tipo) h3,
:where(.sb-tipo) h4,
:where(.sb-tipo) h5,
:where(.sb-tipo) h6 {
    font-family: var(--sbt-font-display);
    font-weight: var(--sbt-fw-display);
    line-height: var(--sbt-lh-heading);
    letter-spacing: var(--sbt-ls-heading);
    color: inherit;                /* neutraliza o #fff vazado de :1128 */
}

:where(.sb-tipo) h1 { font-size: var(--sbt-fs-h1); }
:where(.sb-tipo) h2 { font-size: var(--sbt-fs-h2); }
:where(.sb-tipo) h3 { font-size: var(--sbt-fs-h3); }
:where(.sb-tipo) h4 { font-size: var(--sbt-fs-h4); }
:where(.sb-tipo) h5 { font-size: var(--sbt-fs-h5); }
:where(.sb-tipo) h6 { font-size: var(--sbt-fs-h6); }

/* Único !important da folha, cirúrgico.
   system2026.css:1128 aplica `text-align: left !important` a h2..h6 do documento
   inteiro. Só outro !important a vence; a especificidade precisa ser exatamente
   (0,0,1) para empatar com `h2` e ganhar por ordem, mas PERDER para o
   `.text-center` (0,1,0) do Bootstrap que os partials usam. :where() tem
   especificidade zero (Selectors 4 §16), então o tipo fora dele dá (0,0,1). */
:where(.sb-tipo) h1,
:where(.sb-tipo) h2,
:where(.sb-tipo) h3,
:where(.sb-tipo) h4,
:where(.sb-tipo) h5,
:where(.sb-tipo) h6 {
    text-align: inherit !important;
}

/* Display do Bootstrap dentro do escopo: mesma família, tamanho na base correta.
   (0,1,0) empata com .display-N do Bootstrap e vence por ordem. */
:where(.sb-tipo) .display-1,
:where(.sb-tipo) .display-2,
:where(.sb-tipo) .display-3,
:where(.sb-tipo) .display-4,
:where(.sb-tipo) .display-5,
:where(.sb-tipo) .display-6 {
    font-family: var(--sbt-font-display);
    font-weight: var(--sbt-fw-display);
    font-size: var(--sbt-fs-display);
    line-height: var(--sbt-lh-display);
    letter-spacing: var(--sbt-ls-heading);
}

/* Texto corrente e controles */
:where(.sb-tipo) p,
:where(.sb-tipo) li,
:where(.sb-tipo) label,
:where(.sb-tipo) input,
:where(.sb-tipo) select,
:where(.sb-tipo) textarea,
:where(.sb-tipo) .btn,
:where(.sb-tipo) .nav-link,
:where(.sb-tipo) .dropdown-item,
:where(.sb-tipo) .form-control,
:where(.sb-tipo) .form-select {
    font-family: var(--sbt-font-body);
}

:where(.sb-tipo) p {
    font-size: var(--sbt-fs-body);
    line-height: var(--sbt-lh-body);
}

:where(.sb-tipo) .btn {
    font-weight: var(--sbt-fw-semibold);
    letter-spacing: 0;
}

/* Tamanho apenas no .nav-link. O .dropdown-item costuma trazer .fs-* próprio do partial
   e não deve ser redimensionado aqui — ver a nota sobre .fs-* logo abaixo. */
:where(.sb-tipo) .nav-link {
    font-size: var(--sbt-fs-nav);
}

/* Sem font-size: na Home o .navbar-brand contém apenas a imagem da marca. */
:where(.sb-tipo) .navbar-brand {
    font-family: var(--sbt-font-display);
    font-weight: var(--sbt-fw-display);
}

:where(.sb-tipo) strong,
:where(.sb-tipo) b {
    font-weight: var(--sbt-fw-display);   /* negrito real da variável, não sintético */
}

/* O .lead do Bootstrap impõe peso 300 e 1.25rem, que nesta base rende 12,5px e fino
   demais sobre fundo colorido. (0,1,0) empata com ele e vence por ordem. */
:where(.sb-tipo) .lead {
    font-size: var(--sbt-fs-lead);
    font-weight: var(--sbt-fw-medium);
    line-height: var(--sbt-lh-body);
}

/* Os utilitários .fs-1 a .fs-6 do Bootstrap NÃO são recompostos, de propósito.
   Os partials já os calibraram visualmente nesta base de 10px — o menu principal,
   por exemplo, usa .fs-3 em oito itens de dropdown. Reescrevê-los para a escala
   nominal do Bootstrap dobraria esses tamanhos, sobretudo no celular. Quando um
   tamanho estiver ruim, ajustar no próprio partial, como foi feito no hero. */

:where(.sb-tipo) small,
:where(.sb-tipo) .small {
    font-size: var(--sbt-fs-small);
}

/* Controle de viúvas e linhas equilibradas onde há suporte (Chrome 117+, Safari 17.5+);
   propriedade desconhecida é ignorada nos demais navegadores. */
:where(.sb-tipo) p,
:where(.sb-tipo) h2,
:where(.sb-tipo) h3 {
    text-wrap: pretty;
}
:where(.sb-tipo) h1,
:where(.sb-tipo) .display-1,
:where(.sb-tipo) .display-2,
:where(.sb-tipo) .display-3,
:where(.sb-tipo) .display-4 {
    text-wrap: balance;
}

/* Dados numéricos: algarismos tabulares, nunca monospace */
.sb-tipo .sb-tipo-num {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   4. Modificadores — eco do "BOX": caixa alta, bold, espaçamento largo
   -------------------------------------------------------------------------- */
.sb-tipo .sb-tipo-caps {
    font-family: var(--sbt-font-body);
    font-size: var(--sbt-fs-caps);
    font-weight: var(--sbt-fw-display);
    letter-spacing: var(--sbt-ls-caps);
    text-transform: uppercase;
    color: var(--sbt-ciano-escuro);
}

/* Variante maior do kicker, para uso acima de um título de hero. */
.sb-tipo .sb-tipo-caps-lg {
    font-family: var(--sbt-font-body);
    font-size: var(--sbt-fs-caps-lg);
    font-weight: var(--sbt-fw-display);
    letter-spacing: var(--sbt-ls-caps);
    text-transform: uppercase;
    color: var(--sbt-ciano-escuro);
}

.sb-tipo .sb-tipo-display-caps {
    letter-spacing: var(--sbt-ls-caps);
    text-transform: uppercase;
}

.sb-tipo .sb-tipo-lead {
    font-size: var(--sbt-fs-lead);
    font-weight: var(--sbt-fw-body);
    line-height: var(--sbt-lh-body);
}

.sb-tipo .sb-tipo-small {
    font-size: var(--sbt-fs-small);
    line-height: 1.4;
}

.sb-tipo .sb-tipo-ciano { color: var(--sbt-ciano-escuro); }   /* só texto grande */
.sb-tipo .sb-tipo-tinta { color: var(--sbt-tinta); }
.sb-tipo .sb-tipo-corpo { color: var(--sbt-corpo); }

/* --------------------------------------------------------------------------
   5. Movimento reduzido — nenhuma transição tipográfica desta folha
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sb-tipo,
    .sb-tipo * {
        scroll-behavior: auto;
    }
}