/* shared/chassi.css Sistema visual dos brandbooks Terranova. Estrutura, medidas e comportamento seguem o formato de brandbook web consagrado (cadernos, listas numeradas, specimen tipografico, swatch com HEX/RGB/CMYK). O codigo e nosso. Toda cor e toda familia tipografica vem de tokens.css, emitido por marca. Os valores abaixo existem so para o arquivo abrir sozinho no navegador durante desenvolvimento. Defeito critico corrigido aqui: :root sem camada e :root em camada tem a MESMA especificidade; em especificidade empatada, quem carrega por ultimo no documento vence. tokens.css entra antes de chassi.css no template, entao este bloco, vindo depois com a mesma especificidade, sempre vencia a cascata e mascarava os tokens reais de qualquer marca. A regra de cascade layers do CSS resolve isso sem depender de ordem: declaracao sem camada sempre vence declaracao dentro de QUALQUER camada, nao importa a ordem de carregamento nem a especificidade do seletor. Colocando o fallback dentro de uma camada nomeada, o :root normal de tokens.css (sem camada) passa a vencer sempre, e o fallback continua valendo quando chassi.css abre sozinho (nada sem camada entra para disputar). */ @layer chassi-fallback { :root { --bg: #f3f3f3; --ink: #191919; --accent: #13e6ae; --sans: system-ui, sans-serif; --mono: ui-monospace, monospace; --display: var(--sans); --grad-marca: linear-gradient(90deg, var(--accent), var(--ink)); } } /* fim dos fallbacks */ /* Este :root (sem camada, de proposito) e estrutural do chassi, nao fallback de marca: --muted, --line e --linha-forte sao derivadas de --ink (a marca nao tem como declarar as tres sozinha, senao colidiriam com a mesma propriedade vindas de fontes diferentes), e --container, --gutter e --ritmo sao medida de layout, nao token de identidade visual. Por isso NAO entram em @layer chassi-fallback: se entrassem, um tema que por acidente declarasse uma dessas seis chaves (ex.: tema.gutter) venceria a cascata e mudaria o layout do chassi de um jeito que ninguem pediu. A garantia de que nenhuma marca real declara essas chaves nao e so este comentario: brandbook/tokens.py rejeita a carga com ErroDeMarca se tema colidir com qualquer uma delas, e dois testes estaticos (tests/test_render.py::test_html_importa_tokens_e_chassi_nessa_ordem e tests/test_tokens.py::test_chaves_reservadas_do_chassi_batem_com_o_css_de_verdade) travam que nenhuma custom property declarada aqui fora de @layer bata com uma chave de tema possivel, e que a lista reservada em tokens.py bate exatamente com o que este bloco declara. --linha-forte (achados 19/24 da auditoria adversarial): --line (18% de --ink) mede so ~1,7:1 de contraste contra o --bg da FalaTerranova, bom o bastante pro friso decorativo entre itens de uma lista, mas abaixo do minimo 3:1 que WCAG 2.1 1.4.11 exige do indicador visual de um componente de interface (o contorno de um swatch de cor, o contorno de um botao). 50% foi calibrado (tests/test_chassi.py, medido com os tokens reais da FalaTerranova) para passar 3:1 nos dois temas, normal e invertido. */ :root { --muted: color-mix(in srgb, var(--ink) 55%, transparent); --line: color-mix(in srgb, var(--ink) 18%, transparent); --linha-forte: color-mix(in srgb, var(--ink) 50%, transparent); --container: 1440px; --gutter: 32px; --ritmo: 160px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg); transition: background-color .8s cubic-bezier(.4, 0, .2, 1); scroll-behavior: smooth; } body { background: transparent; color: var(--ink); font-family: var(--sans); line-height: 1.4; -webkit-font-smoothing: antialiased; transition: color .8s cubic-bezier(.4, 0, .2, 1); } /* A inversao de tema troca fundo e tinta (html vira var(--ink), body vira var(--bg)), entao --muted, --line e --linha-forte tambem precisam trocar de base: sem isso os tres continuam misturados com --ink, que dentro de html.is-dark e a cor do FUNDO, nao mais da tinta. O resultado sem esta redefinicao e texto secundario (.item__text, .rotulo, .item__num) na mesma cor do fundo, contraste ~1:1, praticamente invisivel. As porcentagens de --muted/--line sobem em relacao ao :root (55% vira 62%, 18% vira 22%) porque a mistura aqui parte de --bg sobre um fundo --ink que pode ser mais claro que --ink era no :root; 62%/22% foram medidos no navegador para continuar passando AA (4.5:1) em texto normal com os tokens da FalaTerranova. --linha-forte fica em 50% dos dois lados (medido: passa 3:1 nos dois temas com os tokens da FalaTerranova, ver tests/test_chassi.py). */ html.is-dark { background: var(--ink); --muted: color-mix(in srgb, var(--bg) 62%, transparent); --line: color-mix(in srgb, var(--bg) 22%, transparent); --linha-forte: color-mix(in srgb, var(--bg) 50%, transparent); } html.is-dark body { color: var(--bg); } /* .menu e .hdr pintam a propria superficie opaca a partir de --bg (abaixo), em vez de herdar do body: sem esta contraparte, a troca de tema muda a tinta herdada do body para var(--bg) mas deixa essas duas superficies ainda pintadas em var(--bg) tambem, texto na mesma cor do fundo, contraste 1:1. Medido no navegador antes desta correcao: com html.is-dark ativo, .menu background e .menu__lista a color chegavam ao MESMO rgb. Regra geral: todo componente que pinta uma superficie opaca a partir de --bg precisa desta contraparte. */ html.is-dark .menu, html.is-dark .hdr { background: var(--ink); } a { color: inherit; text-decoration: none; } img, svg { max-width: 100%; display: block; } /* Achados 10/13 da auditoria de tipografia: a folha de estilo do navegador (user agent) ja tem "code { font-family: monospace }" com a mesma especificidade de elemento; herdar var(--mono) do ancestral NAO basta, porque uma declaracao explicita (mesmo a do proprio navegador) sempre vence heranca, especificidade a parte. Isso deixava dois grupos de presos no monospace generico do SO em vez do Mono da marca: os quatro blocos 
 (achado 13: system prompt
   e prompts de imagem, o material que o usuario copia; pre.colavel
   computava a pilha certa, mas o  filho nao herdava) e o 
   inline dentro de paragrafo de conteudo (achado 10: um hex de cor e o
   nome de um arquivo, citados como codigo no meio da prosa). brand.json
   declara Mono para "numeros e dados"; codigo e dado tanto quanto os
   outros. Uma regra de elemento aqui, carregada depois da folha do
   navegador, resolve os dois de uma vez. */
code { font-family: var(--mono); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { max-width: var(--container); margin: 0 auto; width: 100%; }

.rotulo {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Header ------------------------------------------------------------ */
/* background: var(--bg), nao transparent: o header e sticky e fica por
   cima do conteudo que rola por baixo dele. Transparente, o texto que
   passa por baixo (titulo de item, chip de swatch) divide o mesmo pixel
   da marca e da navegacao. A troca para var(--ink) em html.is-dark
   acompanha a mesma troca que html/body ja fazem, poucas linhas acima. */
.hdr {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  transition: background-color .8s cubic-bezier(.4, 0, .2, 1), border-color .8s;
}
/* display: inline-flex + align-items (achado importante da auditoria de
   acabamento: a marca nao aparecia como imagem em header, hero nem
   rodape, so como texto): .hdr__logo entra ANTES do nome dentro do mesmo
   link, e sem flex o img (elemento com baseline propria) desalinha
   verticalmente do texto de 15px ao lado. */
.hdr__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.hdr__brand sup { font-size: 9px; opacity: .7; }
.hdr__logo { height: 22px; width: auto; }
.hdr__nav { display: flex; align-items: center; gap: 32px; }
/* :where(.hdr__nav), nao ".hdr__nav": :where() tem especificidade ZERO
   por definicao (CSS Selectors nivel 4), entao a regra inteira passa a
   valer (0,0,1), a especificidade de um seletor de elemento sozinho
   (button ou a). Com ".hdr__nav button, .hdr__nav a" (0,1,1: uma classe
   mais um elemento), esta regra base tinha especificidade MAIOR que
   .copiar, .cta e .hdr__lang (todas 0,1,0, uma classe so) e vencia
   font-size/border/font-family dos tres dentro do header, goste ou nao da
   ordem de carregamento (especificidade maior sempre vence, independente
   de quem vem depois no arquivo). Medido no navegador antes desta
   correcao: o botao "copiar o brandbook" do header saia em 14px/sans/sem
   borda, em vez de 10px/mono com pilula como todo outro .copiar da
   pagina. */
:where(.hdr__nav) button, :where(.hdr__nav) a { font-size: 14px; cursor: pointer; background: none; border: 0; color: inherit; font-family: inherit; }
.hdr__nav .cta {
  border: 1px solid currentColor; border-radius: 999px;
  padding: 8px 16px; font-size: 13px; font-weight: 500;
  transition: background-color .15s, color .15s;
}
.hdr__nav .cta:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.hdr__lang { font-family: var(--mono); font-size: 12px; opacity: .35; }

/* Hero e meta ------------------------------------------------------- */
.hero { padding: 64px var(--gutter) 48px; border-bottom: 1px solid var(--line); }
/* Logo decorativo acima do titulo (achado importante da auditoria de
   acabamento): o hero e o primeiro conteudo que qualquer visitante ve, e
   media ate esta correcao nao tinha uma unica imagem. 40px de altura fica
   proporcional ao menor degrau "grande" da propria escada de tamanho da
   marca (180px, pensado para avatar/perfil), sem competir com o titulo
   gigante logo abaixo. */
.hero__logo { height: 40px; width: auto; margin-bottom: 24px; }
/* overflow-wrap: rede de seguranca para um wordmark de uma palavra so
   sem espaco onde quebrar (marca.hero.titulo pode ser o mesmo nome da
   marca que aparece no rodape). Achados critico 12 / importante 7 da
   auditoria adversarial: depois de corrigir .item__body e .ft__wordmark,
   ainda sobrava excesso de scroll horizontal em 320px de viewport,
   rastreado ate aqui (o hero e o primeiro conteudo da pagina, sempre
   visivel, nunca tinha ganhado esta rede). Nao reusa .ft__wordmark: o
   hero e a peca tipografica maior da pagina, com o proprio clamp
   (56..140px), maior que o do rodape de proposito. */
.hero__title {
  font-family: var(--display);
  font-size: clamp(56px, 9vw, 140px);
  font-weight: 500; line-height: .96; letter-spacing: -.035em;
  overflow-wrap: anywhere;
  margin-bottom: 24px;
}
.hero__sub { font-size: clamp(20px, 2vw, 28px); line-height: 1.25; max-width: 58ch; }

.meta { padding: 48px var(--gutter); border-bottom: 1px solid var(--line); }
.meta__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.meta__col { display: flex; flex-direction: column; gap: 14px; }
.meta__val { font-size: 16px; }
.meta__val a { border-bottom: 1px solid currentColor; width: fit-content; display: block; }

/* Divisor de caderno ------------------------------------------------ */
.part {
  min-height: 100vh; display: flex; align-items: stretch;
  padding: var(--ritmo) var(--gutter);
}
.part__inner { display: flex; flex-direction: column; justify-content: space-between; gap: var(--ritmo); flex: 1; }
/* Sem white-space: nowrap de proposito. O tamanho (12.8vw ate 175px) e
   calibrado para um titulo de cerca de 12 caracteres ocupar a largura
   inteira; com nowrap, qualquer titulo maior que isso vaza do container
   e leva scroll horizontal para a pagina inteira ("Identidade visual"
   mediu 1451px num container de 1201px). Deixando quebrar, o titulo que
   cabe continua identico e o que nao cabe vai para a segunda linha. */
/* overflow-wrap/word-break: rede de seguranca para uma palavra unica de
   TITULO DE CADERNO sem espaco onde quebrar (nao o wordmark do rodape,
   que tem a propria classe .ft__wordmark desde a correcao do achado
   critico 13 da auditoria adversarial: reusar esta classe gigante para
   o wordmark quebrava o NOME DA MARCA no meio). Quebra entre palavras
   normais fica identica a antes; so entra em acao quando uma palavra
   sozinha nao cabe. Sem isso, medido no navegador: scrollWidth do
   documento excedia clientWidth em 173px no desktop e 86px no mobile,
   com um titulo de caderno de uma palavra so vazando do container. */
/* clamp baixado de (48, 12.8vw, 175) para (40, 8vw, 120) (defeito 3 do
   enunciado de acabamento): o titulo de CADERNO e subordinado ao titulo
   da MARCA no hero (.hero__title, clamp(56, 9vw, 140)), mas o piso, a
   inclinacao e o teto antigos rendiam maior que o hero em toda largura de
   viewport (medido: "CONCEITO" 42% maior que "FalaTerranova" no hero),
   hierarquia tipografica invertida. Os tres numeros nao sao so "um pouco
   menor": piso 40 < piso 56, inclinacao 8vw < 9vw e teto 120 < 140 juntos
   garantem part__title(v) < hero__title(v) em QUALQUER largura de
   viewport, nao so nos pontos medidos (as duas sao funcoes monotonas nao
   decrescentes de v; piso e inclinacao menores mantem a curva do titulo
   de caderno sempre abaixo da curva do hero, inclusive depois que uma
   das duas bate no proprio teto). */
.part__title {
  font-family: var(--display);
  font-size: clamp(40px, 8vw, 120px);
  font-weight: 700; line-height: .9; letter-spacing: -.035em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.part__body { max-width: 62ch; display: flex; flex-direction: column; gap: 16px; }
.part__body p { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.5; }

/* Secao e lista numerada -------------------------------------------- */
.section { padding: var(--ritmo) var(--gutter); }
.section__inner { display: flex; flex-direction: column; gap: 120px; }
/* align-items: flex-start (defeito 1 do enunciado de acabamento): sem
   ele, o eixo cruzado de um flex column usa o default stretch, e o botao
   "copiar como markdown" (um