/* base — reset curto + primitivas de layout e tipografia */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--f-grotesk);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

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

::selection { background: var(--surface-accent); color: var(--text-on-accent); }

/* ---------- layout ---------- */

.shell {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.section {
  background: var(--surface-page);
  color: var(--text-primary);
  padding-block: var(--layout-section);
  border-top: var(--border-hairline);
}
/* A seção de abertura das páginas internas não soma respiro próprio no topo:
   o bloco de título que vem dentro dela já traz o seu. Somados, os dois
   abriam 224px vazios entre a barra e o título. */
.section--flush { border-top: 0; padding-top: 0; }
.section--tight { padding-block: var(--s-6); }

.grid {
  display: grid;
  grid-template-columns: repeat(var(--layout-grid-cols), 1fr);
  gap: var(--s-3);
}

.stack > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-4); }

.measure { max-width: var(--layout-measure); }

/* ---------- tipografia ---------- */

.display-xl, .display-l, .display-m, .display-s {
  font-weight: var(--w-bold);
  letter-spacing: var(--type-display-tracking);
  line-height: var(--type-display-leading);
  margin: 0;
  text-wrap: balance;
}
.display-xl { font-size: var(--type-display-xl-size); }
.display-l  { font-size: var(--type-display-l-size); }
.display-m  { font-size: var(--type-display-m-size); line-height: var(--type-heading-leading); letter-spacing: var(--type-heading-tracking); }
.display-s  { font-size: var(--type-display-s-size); line-height: var(--type-heading-leading); letter-spacing: var(--type-heading-tracking); }

/* Título em caixa alta é uma das assinaturas da identidade dela, pedido em
   16/10. Vale para todo título do conteúdo, inclusive nome de case.
   A assinatura "Mozi" da barra e do rodapé fica fora, porque é marca. */
#app :is(.display-xl, .display-l, .display-m, .display-s,
         .case-card__title, .feed__ttl),
#app .statement:not(.statement--body) {
  text-transform: uppercase;
}

.lead {
  font-size: var(--type-lead-size);
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}

.body { margin: 0; color: var(--text-secondary); max-width: var(--layout-measure); }
.body--primary { color: var(--text-primary); }
.body-sm { font-size: var(--type-body-sm-size); color: var(--text-secondary); margin: 0; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-accent);
  margin: 0 0 var(--s-3);
  font-weight: var(--w-medium);
}
.eyebrow--quiet { color: var(--text-muted); }

.mono {
  font-family: var(--f-mono);
  font-size: var(--type-mono-size);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.accent { color: var(--text-accent); }

/* régua vermelha — o soco visual único por peça (DNA 3.1) */
.rule-accent {
  width: var(--s-6);
  height: var(--rule-accent-weight);
  background: var(--surface-accent);
  border: 0;
  margin: 0 0 var(--s-4);
}