/* ═══════════════════════════════════════════════════════════════════
   Cumbuca Design System — base

   Resets e tipografia base compartilhados. Importar DEPOIS de tokens.css:

     @import "@cumbuca/design-system/tokens.css";
     @import "@cumbuca/design-system/base.css";

   Tipografia: body e h1–h4 usam SÓ os papéis --type-* (tokens.css), que
   mudam por contexto — default PRODUCT (ferramentas: UI em Inter, body 14,
   H1 Matangi 700 24, h2 Inter 600, h3–h4 Inter 500) ou `data-context="marketing"` (website:
   body Fustat 16, escala de headings do Figma). Nunca referencie --heading-N /
   --text-N aqui: quem quiser a escala de marketing numa ferramenta
   escreve `font-size: var(--heading-1)` na mão — e isso é grep-ável.
   ═══════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* [hidden] SEMPRE esconde — sem isso, qualquer classe com display definido
   (flex/grid) venceria a regra UA e o atributo viraria no-op silencioso */
[hidden] {
  display: none !important;
}

/* Placeholders de qualquer input/textarea — fonte única, via token */
::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* antialiased afina o texto em corpo pequeno no macOS (decisão de marca:
   preferimos o traço mais leve). O tracking do texto corrente vem do
   contexto (hoje 0 nos dois — o Figma tem 0). Componentes (button/input/
   label) não herdam letter-spacing — ficam em 0 explícito. */
body {
  background: var(--bg-surface);
  color: var(--text-body);
  font: var(--type-body-font);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
}

/* Subárvore temada: o body define `color`, e o valor COMPUTADO é herdado —
   trocar --text-body via data-theme não recolore os filhos sozinho (texto
   sem cor própria numa <section data-theme="dark"> ficava escuro sobre ink).
   Redeclarar aqui recomeça a herança dentro do tema. */
[data-theme='dark'],
[data-theme='light'] {
  color: var(--text-body);
}

/* Subárvore de contexto: mesmo problema, na tipografia. O body resolve
   `font` com o --type-body-font do contexto do <html>, e os filhos herdam a
   família/tamanho JÁ COMPUTADOS — uma <section data-context="marketing">
   numa página product continuava em Inter 14. Redeclarar aqui recomeça a
   herança dentro do contexto (no <html> é redundante com o body). */
[data-context] {
  font: var(--type-body-font);
  letter-spacing: var(--tracking-body);
}

/* Ritmo vertical: margem SÓ no eixo inferior (--type-*-space), nunca em
   cima — o espaço entre blocos vem do fluxo. Ferramentas: h1/h2 → 24,
   h3/h4 → 12, p → 12. O último filho de um container não empurra. */
h1,
h2,
h3,
h4,
h5,
h6,
.ds-hero {
  color: var(--text-heading);
}

h1 {
  font: var(--type-h1-font);
  letter-spacing: var(--type-h1-tracking);
  margin: 0 0 var(--type-h1-space);
}

h2 {
  font: var(--type-h2-font);
  letter-spacing: var(--type-h2-tracking);
  margin: 0 0 var(--type-h2-space);
}

h3 {
  font: var(--type-h3-font);
  letter-spacing: var(--type-h3-tracking);
  margin: 0 0 var(--type-h3-space);
}

h4,
h5,
h6 {
  font: var(--type-h4-font);
  letter-spacing: var(--type-h4-tracking);
  margin: 0 0 var(--type-h4-space);
}

/* Marketing: corte da caixa de texto na capital e na baseline
   (text-box-trim), sem a meia-entrelinha em cima e embaixo. Quem leva trim
   são os estilos que o têm na Brand Library: H3, H4 e o dado em destaque.
   Hero, H1 e H2 ficaram SEM trim na revisão de 2026-09-17 — com trim a hero
   fecha 11px mais baixa que o frame do Figma. Progressivo: Firefox ignora e
   fica com a caixa de linha normal. Título com papel de corpo (Fustat) não
   leva trim — quem restilizar h3/h4 para Fustat zera com `text-box: none`. */
[data-context='marketing'] :where(h3, h4, .ds-stat) {
  text-box: trim-both cap alphabetic;
}

/* Elementos que nascem em 700 no navegador. Peso de ênfase é UM token por
   contexto (--weight-emphasis): product = 500 (os pesos maiores da Inter são
   do h2 e do rótulo curto — ênfase pesada no corpo pesaria demais), marketing = 700
   (Fustat Bold, carregada pelo website). Ver cumbuca-context/fonts.md. */
strong,
b,
th,
dt {
  font-weight: var(--weight-emphasis);
}

/* Hero Title — o HTML não tem elemento próprio para hero. Em marketing
   é Matangi 800 36px/1.3 (30 no mobile); em product (ferramentas) equivale ao h1. */
.ds-hero {
  font: var(--type-hero-font);
  letter-spacing: var(--type-hero-tracking);
  margin: 0 0 var(--type-h1-space);
}

/* Dado em destaque (stat): Matangi ExtraBold na escala de heading. .ds-stat =
   32 (stat cards); .ds-stat--lg = 48 (número-herói de seção). Cor de heading,
   sem margem (vive em flex/grid com gap). O website carrega Matangi 800. */
.ds-stat {
  margin: 0;
  font: var(--type-stat-font);
  letter-spacing: var(--type-stat-tracking);
  color: var(--text-heading);
}

.ds-stat--lg {
  font: var(--type-stat-lg-font);
}

p {
  margin: 0 0 var(--type-body-space);
}

/* Prosa: wrapper da coluna de conteúdo de leitura longa — API docs,
   markdown renderizado, artigos. Obrigatório em API docs (AGENTS.md). A
   coluna inteira tem no máximo --measure-prose e fica centralizada no
   espaço disponível: texto, tabela, card e código acompanham a mesma
   largura. Entrelinha --leading-prose no texto corrido. Headings não mudam:
   a shorthand `font` dos papéis --type-* já traz o --leading-body. Tabela
   volta ao --leading-body (é para escanear, não para ler corrido). */
.ds-prose {
  max-width: var(--measure-prose);
  margin-inline: auto;
  line-height: var(--leading-prose);
}

.ds-prose :where(table) {
  line-height: var(--leading-body);
}

/* Títulos da prosa: um degrau acima dos de UI (--type-prose-*, tokens.css).
   Vale também para título dentro de card na coluna. */
.ds-prose h2 {
  font: var(--type-prose-h2-font);
}

.ds-prose h3 {
  font: var(--type-prose-h3-font);
}

.ds-prose h4 {
  font: var(--type-prose-h4-font);
}

/* Ritmo da prosa: o espaço é do WRAPPER, nos filhos diretos, num eixo só —
   o TOP. Exceção documentada ao "margem só embaixo" do base.css: o que
   separa grupos é o ar ANTES de um título, e isso só se expressa em cima.
   Invariante: filho direto do .ds-prose não leva margem vertical própria
   (o primeiro filho fica em 0 sozinho; padding continua do componente).
   Valores em --prose-space-* (tokens.css). Mesma especificidade (0,1,1):
   a ORDEM decide, e a última regra mantém o título junto do seu conteúdo. */
.ds-prose > * {
  margin-block: 0;
}

.ds-prose > * + * {
  margin-top: var(--prose-space-text);
}

.ds-prose > :not(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6) + *,
.ds-prose > * + :not(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6) {
  margin-top: var(--prose-space-block);
}

.ds-prose > * + :is(h3, h4) {
  margin-top: var(--prose-space-group);
}

.ds-prose > * + h2 {
  margin-top: var(--prose-space-section);
}

.ds-prose > :is(h1, h2, h3, h4) + * {
  margin-top: var(--prose-space-heading);
}

/* Corpos menores da escala Body: tamanho + tracking próprios. <small> = Body
   SM; para Body XS use .ds-text-xs (o body herda --tracking-body para 14+). */
small,
.ds-text-sm {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-sm);
}

.ds-text-xs {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-xs);
}

/* Eyebrow (padrão de marca): 12 em 700 na fonte de UI,
   line-height auto, sem tracking, caixa alta digitada, gold. Variante --muted
   para cabeçalhos de tabela (mesma geometria, cor secundária). */
/* Eyebrow: RÓTULO CURTO (th de tabela, label de célula, tag) — não é título de
   seção; seção dentro de card é <h3>. Sem tracking (v3.0.1). */
.ds-eyebrow {
  margin: 0;
  font-size: var(--text-sm);
  /* 700 nos dois contextos (v4.0.0): rótulo de 12px em caixa alta precisa
     do peso para ler como rótulo, não como texto pequeno */
  font-weight: var(--weight-bold);
  line-height: normal;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--brand-gold);
}

.ds-eyebrow--muted {
  color: var(--text-muted);
}

/* Cor do texto corrente: HERDA --text-body (= text-primary) do body — não
   forçamos `color` em p para não quebrar texto herdado em superfícies
   coloridas (toast, botão). A ÚNICA forma sancionada de clarear texto é
   --text-muted (= text-secondary), via esta classe ou var(--text-muted).
   Nunca opacity, outros cinzas ou --input-placeholder fora de placeholder. */
.ds-text-secondary {
  color: var(--text-muted);
}

/* :where() = especificidade zero: CSS de componente vence sem !important */
:where(h1, h2, h3, h4, h5, h6, p, .ds-hero):last-child {
  margin-bottom: 0;
}

a {
  color: var(--link);
  text-decoration: none;
}

button {
  font-family: var(--font-body);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--selection-bg);
  color: var(--text-heading);
}