/* ============================================================================
   NODWISE MARKETING · TIPOGRAFIA DO SITE
   ----------------------------------------------------------------------------
   Este arquivo NAO define tipografia — nem uma declaracao. Ele faz duas coisas:

     1. declara a ORDEM DAS CAMADAS, para a cascata deixar de depender de ordem
        de arquivo;
     2. importa o typography.css do PRODUTO, que e a fonte da verdade unica para
        os dois produtos.

   O site NAO tem papeis proprios. A secao 7 do typography.css se chama "PAPEIS
   DE MARKETING / SITE" e e o lugar deles: .role-display, .role-eyebrow,
   .role-subhead, .role-lede, .role-stat e o bloco .role-answer-*. Um papel de
   marketing declarado aqui seria a divisao que aquela secao existe para evitar
   — e foi assim que o site acumulou um sistema paralelo com nomes proprios
   (.display, .eyebrow, .subhead, .lede) para papeis que o produto ja publicava.

   POR QUE A ORDEM DAS CAMADAS E O ITEM 1, e nao um detalhe:
   o typography.css do produto vive em `@layer components`. base.css e blocks.css
   do site NAO tem camada, e em CSS o que esta FORA de camada vence o que esta
   DENTRO, independentemente de especificidade. Sem a declaracao abaixo, cada
   `font-size` que sobrar no base.css atropela o papel importado — e atropela em
   silencio, porque a pagina continua renderizando, so com o valor antigo. E o
   mesmo modo de falha do CSS scoped do Blazor no produto.

   A camada `site` vem DEPOIS de `components` de proposito: o site precisa vencer
   em LAYOUT (grid, max-width, margem, fundo). O que ele nao pode mais fazer e
   vencer em tipografia — e isso se garante APAGANDO as declaracoes, nao
   reordenando camadas. Camada resolve conflito; nao resolve duplicacao.

   UM CASO QUE A CAMADA NAO RESOLVE: `.cont-lead` (blocks.css 802) declara
   `font-size: ... !important`, e !important na camada `site` vence o papel em
   `@layer components` de qualquer jeito. E o unico !important de tipografia nos
   blocos da Home, e ele tem de sair — nao ha ordem de camada que o contorne.

   NAO HA ALIAS DOS NOMES LEGADOS, e isso e uma decisao. `.display`, `.subhead`,
   `.eyebrow`, `.lede` e `.section-hero` sao escritos nos ~30 componentes de
   bloco, em Components/Blocks/<Bloco>/<Bloco>.razor — nao no conteudo YAML, nem
   nos 20 idiomas. Renomear e um arquivo por bloco, na mesma edicao em que a
   declaracao CSS e apagada. Um alias tornaria os dois nomes validos para
   sempre, que e o estado do qual esta refatoracao esta saindo.

   O QUE TAMBEM NAO ENTRA AQUI — a lista existe para poupar a proxima discussao:
     · enfase serif inline (era `.display strong`, `.answer-a strong`,
       `.stat em`, `.ansline strong`, `.cont-note strong`) -> <strong> e sans 700
       e nao recolore. Se o ponto era a COR, use .text-accent no elemento.
     · qualquer coisa em cursive (era `.pcursive`, `.cont-lead b`,
       `.quote-big blockquote em`) -> a Kaushan saiu do bundle.
     · serif em lead, definicao e fechamento (era `.cont-lead`, `.cont-closing`,
       `.pole .def`, `.dB-def`, `.q7 td.qq`) -> serif e so citacao EM BLOCO. Um
       `.cont-q` com barra de acento e pull-quote de verdade: vira
       <blockquote class="feature"> e ganha o serif de volta pelo elemento.

   NOTA DE SINTAXE, aprendida do jeito ruim: nao escreva um glob com a sequencia
   asterisco-barra dentro de um comentario CSS. Ela FECHA o comentario, o resto
   do cabecalho vira codigo invalido, a folha carrega com zero regras e o
   @import abaixo nunca executa — sem erro no console. Foi o que aconteceu com
   "Components/Blocks/" seguido de dois globs, e e por isso que o caminho acima
   esta escrito com <Bloco>.

   COMO LINKAR, nesta ordem (App.razor / index.html):
     tokens.css            <- cores, espacos, familias
     typography-site.css   <- ESTE arquivo (importa o do produto)
     base.css              <- envolver o conteudo em `@layer site { ... }`
     blocks.css            <- idem
     glass.css / site.css  <- idem
   ============================================================================ */

@layer components, site;

/* O arquivo do produto, verbatim. NAO copie o conteudo dele para ca — a copia
   dupla e exatamente o que esta refatoracao existe para acabar. Em build
   estatico o caminho e o do pacote publicado de Nodwise.UI.Components; em dev,
   o arquivo copiado para wwwroot/css/. */
@import url("./typography.css") layer(components);