/* atoms.css — CAMADA DE ATOMO TIPOGRAFICO (ADR-0001).
   Papeis nomeados que consolidam as triplas (font-size / font-weight / color)
   identicas em varios componentes. Tecnica (i): agrupamento por lista de seletores
   (CSS puro, sem build). ZERO mudanca visual — fatoracao de triplas byte-a-byte
   identicas; onde a cor diverge (role: action, role: label) extrai-se APENAS fs+fw
   e cada seletor mantem a sua propria cor (preservada no proprio componente).

   ORDEM DE CASCATA CANONICA (base.html): reset -> tokens -> ATOMS -> components ->
   shell/auth/storefront/chat/producao. atoms.css carrega DEPOIS de tokens.css (os
   papeis usam var(--fs-*)) e ANTES de components.css e dos CSS de contexto (todos
   herdam dos papeis) — entao modificadores tardios (.kpi__value--success,
   .sidebar__sublink--active, .tab.is-active) continuam sobrescrevendo.
   Promovido de um bloco no topo de components.css para arquivo dedicado
   (ADR-0001, emenda 2026-06-30): a dependencia de cascata vira explicita e ordenada.
   As REGRAS abaixo sao byte-identicas ao bloco original (so este cabecalho mudou). */

/* role: title-page — 24 / extrabold / ink */
.page-title { font-size: var(--fs-24); font-weight: var(--fw-extrabold); color: var(--c-ink); }

/* role: metric — 24 / bold / ink + tabular-nums (DESIGN-SPEC B4/R4: numeral em Inter 800 fecha
   os counters; 700+tabular preserva destaque e legibilidade — emenda leve ao ADR-0007) */
.kpi__value { font-size: var(--fs-24); font-weight: var(--fw-bold); color: var(--c-ink); font-variant-numeric: tabular-nums; }

/* role: title-section — 20 / bold / ink */
.detail-status__title,
.confirm-card__title,
.auth-form__title,
.sf-section-title { font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--c-ink); }

/* role: title-card — 16 / bold / ink */
.card__title,
.form-section__title,
.module-card__title { font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--c-ink); }

/* role: control — 16 / (regular) / ink (DESIGN-SPEC B6: fs-16 no controle de form mata o
   auto-zoom do iOS e era o valor do legado; saiu do role body 14 neste ciclo — S2.
   S4b: inputs reais de busca/edicao (selectlist/combo/grades-key) entram no role control —
   todo campo digitavel e controle, nao corpo. PASSO 8 [produto-create-detail-paridade]:
   .field__static (valor read-only equivalente ao control editavel) entra aqui tambem —
   antes SEM NENHUMA regra propria em nenhum arquivo CSS (nao herdava de .field__wrap como
   se supunha; aquele seletor exige tag input/select/textarea, .field__static e um <span>),
   renderizava em preto/16px padrao do browser. Decisao do dono: corrigir pra --c-ink, nao
   preservar a heranca visual anterior — mudanca visual real e intencional, nao acidente.) */
.field__control,
.field__wrap > input,
.field__wrap > select,
.field__wrap > textarea,
.selectlist-search,
.combo-search { font-size: var(--fs-16); color: var(--c-ink); }
/* C2 [detail-labels-tipografia]: .field__static EXTRAÍDO da regra compartilhada acima —
   font-weight:bold só faz sentido pro valor estático (destaca o dado num contexto
   read-only, sem borda/caixa de controle pra dar peso visual); nos controles editáveis
   acima (input/select/textarea/selectlist-search/combo-search) herdaria bold
   indevidamente se ficasse na mesma linha — mantidos intocados em regular (herdado). */
.field__static { font-size: var(--fs-16); color: var(--c-ink); font-weight: var(--fw-bold); }

/* role: body — 14 / (regular) / ink */
.check, .radio,
.combo-option,
.wa-preview__bubble { font-size: var(--fs-14); color: var(--c-ink); }

/* role: action — 14 / semibold (cor preservada por seletor: btn=info, tab/stepper=gray, cta=green) */
.btn,
.tab,
.stepper__step,
.upload__cta { font-size: var(--fs-14); font-weight: var(--fw-semibold); }

/* role: label — 12 / semibold (cor/caixa preservada: kpi/thead=gray; thead=uppercase+ls-wide).
   PASSO PB [detail-labels-tipografia]: .field__label EXTRAÍDO deste grupo — tipografia
   própria (11/semibold/--c-gray, discreta) diferente do restante do grupo (12/gray),
   não fazia mais sentido compartilhar a regra. Ver abaixo. */
.kpi__label,
.table thead th { font-size: var(--fs-12); font-weight: var(--fw-semibold); }

/* role: label-field — 11 / semibold / gray discreto (era navy --c-ink 12px, compartilhado
   com kpi__label/thead th — components.css:98 antigo). Escala pra --fs-11 (menor da escala,
   "micro-label/overline") e cor pra --c-gray (#64748b, mesmo tom de .link--muted/
   .kpi__value--muted) — label de campo deixa de competir visualmente com o valor
   (.field__static, role:control, --c-ink), ficando visualmente subordinado como rótulo. */
.field__label { font-size: var(--fs-11); font-weight: var(--fw-semibold); color: var(--c-gray); }

/* role: prose — 16 / lh-relaxed / measure ~70ch / ink (DESIGN-SPEC C4 — decisão EXPLÍCITA do
   legado core.css:1336 ".prose 16/1.6/72ch"; único papel de LEITURA CONTÍNUA do kit: privacy,
   docs, relatórios, texto de confirm. Novo no S3; classe utilitária + membros nomeados.) */
.prose,
.confirm-card__subject { font-size: var(--fs-16); line-height: var(--lh-relaxed); max-width: var(--measure); color: var(--c-ink); }

/* role: caption — 12 / (regular) / gray */
.field__help,
.upload__hint,
.wa-preview__meta,
.formset__del { font-size: var(--fs-12); color: var(--c-gray); }

/* role: subtext — 13 / (regular) / gray */
.pagination__info,
.module-card__desc,
.combo-empty,
.sidebar__sublink { font-size: var(--fs-13); color: var(--c-gray); }