/* =====================================================================
   base.css — reset, fontes, tokens do MOTOR, tipografia global
   ---------------------------------------------------------------------
   Importante: os tokens daqui são a CASCA (a interface do manual).
   As cores do CLIENTE nunca pintam a casca — elas só aparecem dentro
   do conteúdo (amostras, previews, componentes). É isso que deixa o
   mesmo motor servir qualquer marca sem virar uma colcha de retalhos.
===================================================================== */

/* ---------- Fontes (pesos estáticos: webview de app não aplica eixo variável) ---------- */
@font-face { font-family:'PP Neue Montreal'; font-weight:300; font-style:normal; font-display:swap;
  src:url('../fonts/PPNeueMontreal-Light.woff2') format('woff2'); }
@font-face { font-family:'PP Neue Montreal'; font-weight:400; font-style:normal; font-display:swap;
  src:url('../fonts/PPNeueMontreal-Regular.woff2') format('woff2'); }
@font-face { font-family:'PP Neue Montreal'; font-weight:400; font-style:italic; font-display:swap;
  src:url('../fonts/PPNeueMontreal-Italic.woff2') format('woff2'); }
@font-face { font-family:'PP Neue Montreal'; font-weight:500; font-style:normal; font-display:swap;
  src:url('../fonts/PPNeueMontreal-Medium.woff2') format('woff2'); }
@font-face { font-family:'PP Neue Montreal'; font-weight:500; font-style:italic; font-display:swap;
  src:url('../fonts/PPNeueMontreal-MediumItalic.woff2') format('woff2'); }
@font-face { font-family:'PP Neue Montreal'; font-weight:600; font-style:normal; font-display:swap;
  src:url('../fonts/PPNeueMontreal-SemiBold.woff2') format('woff2'); }
@font-face { font-family:'PP Neue Montreal'; font-weight:700; font-style:normal; font-display:swap;
  src:url('../fonts/PPNeueMontreal-Bold.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:400 500; font-style:normal; font-display:swap;
  src:url('../fonts/JetBrainsMono-latin.woff2') format('woff2'); }

/* ---------- Tokens da casca — tema claro ---------- */
:root {
  --ui-font: 'PP Neue Montreal', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --ui-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --bg:        #FFFFFF;
  --bg-alt:    #F7F7F7;
  --bg-card:   #F4F4F4;
  --bg-fundo:  #ECECEC;
  --tinta:     #0A0A0A;
  --tinta-2:   #4B4B4B;
  --tinta-3:   #8C8C8C;
  --linha:     rgba(10,10,10,.10);
  --linha-2:   rgba(10,10,10,.16);
  --inverso-bg:#0A0A0A;
  --inverso-tx:#F4F4F4;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --sidebar-w: 264px;
  --topbar-h: 60px;
  --pad-y: clamp(28px, 3.2vw, 56px);
  /* Largura do conteúdo: 90% da área útil (5% de respiro de cada lado).
     Topbar, conteúdo e rodapé usam a mesma medida para alinharem. */
  --folha-w: 90%;
  --folha-gut: calc((100% - var(--folha-w)) / 2);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .35s;

  --sombra: 0 18px 40px -24px rgba(10,10,10,.35);
}

/* ---------- Tema escuro ---------- */
body[data-tema="escuro"] {
  --bg:        #0A0A0A;
  --bg-alt:    #121212;
  --bg-card:   #161616;
  --bg-fundo:  #1E1E1E;
  --tinta:     #F4F4F4;
  --tinta-2:   #B4B4B4;
  --tinta-3:   #8A8A8A;
  --linha:     rgba(244,244,244,.12);
  --linha-2:   rgba(244,244,244,.20);
  --inverso-bg:#F4F4F4;
  --inverso-tx:#0A0A0A;
  --sombra: 0 18px 40px -24px rgba(0,0,0,.8);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg, video, canvas { display: block; max-width: 100%; }
/* O `display` do navegador para [hidden] é uma regra fraca: qualquer classe
   com display próprio a vence, e o elemento continua visível mesmo escondido
   via JS. Foi o que aconteceu com o botão "Baixar assets" (.btn-pill é
   inline-flex) num cliente sem módulo de downloads. */
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--tinta); color: var(--bg); }

html, body {
  font-family: var(--ui-font);
  background: var(--bg);
  color: var(--tinta);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }

/* ---------- Tipografia do conteúdo ---------- */
.h-display { font-size: clamp(32px, 4.6vw, 58px); font-weight: 400; line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.h-1 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 400; line-height: 1.1;  letter-spacing: -.03em; text-wrap: balance; }
.h-2 { font-size: clamp(21px, 1.9vw, 27px); font-weight: 500; line-height: 1.2;  letter-spacing: -.02em; }
.h-3 { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }

.sobre { /* overline técnica */
  font-family: var(--ui-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.lede { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.62; color: var(--tinta-2); }

.prosa p { max-width: 68ch; color: var(--tinta-2); line-height: 1.68; }
.prosa p + p { margin-top: 15px; }
.prosa strong { color: var(--tinta); font-weight: 500; }
.prosa--largo p { max-width: 82ch; }

.mono { font-family: var(--ui-mono); font-size: 12px; letter-spacing: .02em; }

/* código inline dentro de texto corrido */
code {
  font-family: var(--ui-mono);
  font-size: .86em;
  padding: 1px 6px;
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: 5px;
  color: var(--tinta);
  /* Era `white-space: nowrap`, para token curto não partir no meio. Só que
     valor longo (um radial-gradient inteiro, um caminho de arquivo) então
     não tinha onde quebrar, e travava o min-content de quem estivesse em
     volta: no celular a linha da spec e o item da checklist empurravam a
     página para fora da tela. `pre-wrap` guarda os espaços internos do
     valor e `anywhere` só parte quando não couber de outro jeito — e é o
     `anywhere`, não o `break-word`, que encolhe o min-content do flex. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- Acessibilidade ---------- */
.pular {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--tinta); color: var(--bg); padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0;
}
.pular:focus { left: 0; }

:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}