/* Base de toda página da OZATI: reset, tipografia, larguras, ritmo das seções e texto corrido.
   Cores e medidas só pelos tokens.css; os componentes ficam no components.css. */
@layer reset, base, layout, components, page;

@view-transition { navigation: auto; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
}

@layer base {
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--altura-barra) + var(--espaco-4)); }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font: var(--peso-regular) var(--texto-corpo) / var(--entrelinha-texto) var(--fonte-texto);
    letter-spacing: var(--tracking-texto);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4 { font-weight: var(--peso-semi); line-height: var(--entrelinha-titulo); letter-spacing: var(--tracking-titulo); text-wrap: balance; }
  h1 { font-size: var(--texto-titulo-1); }
  h2 { font-size: var(--texto-titulo-2); }
  h3 { font-size: var(--texto-titulo-3); line-height: 1.3; }
  p { text-wrap: pretty; }

  a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
  /* O contorno de foco acompanha o canto do próprio elemento (cápsula no botão, canto largo no cartão) */
  :focus-visible { outline: 2px solid var(--cor-foco); outline-offset: 2px; }
  ::selection { background: var(--cor-acao); color: var(--cor-acao-texto); }

  code, kbd, pre { font-family: var(--fonte-codigo); font-size: 0.9em; letter-spacing: 0; }
  hr { height: 0; margin: var(--espaco-7) 0; border: 0; border-top: var(--linha); }

  .skip-link { position: absolute; left: var(--espaco-4); top: -4rem; z-index: 300; padding: var(--espaco-2) var(--espaco-4); background: var(--cor-fundo); border: var(--linha); border-radius: var(--raio-controle); }
  .skip-link:focus { top: var(--espaco-4); }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@layer layout {
  /* Três larguras: .container (conteúdo), .container-text (leitura) e .container-wide (faixas).
     A leitura fica na mesma coluna do conteúdo, alinhada à esquerda; só a medida da linha encurta. */
  .container, .container-text, .container-wide { width: 100%; margin-inline: auto; padding-inline: var(--margem-lateral); }
  .container, .container-text { max-width: calc(var(--largura-conteudo) + 2 * var(--margem-lateral)); }
  .container-text > * { max-width: var(--largura-texto); }
  .container-wide { max-width: calc(var(--largura-ampla) + 2 * var(--margem-lateral)); }

  main { flex: 1; }

  /* Seções: o respiro vertical é o mesmo em todo o site; .section-alt separa pela superfície */
  .section { position: relative; z-index: 3; padding-block: var(--espaco-secao); background: var(--cor-fundo); }
  /* Duas seções seguidas sem faixa não somam o respiro; ele fica acima do título da segunda */
  .section:not(.section-alt):has(+ .section:not(.section-alt)) { padding-bottom: 0; }
  .section-alt { background: var(--cor-superficie); }
  .section-header { max-width: var(--largura-texto); margin-bottom: var(--espaco-7); }
  .section-title { font-size: var(--texto-titulo-1); }
  .section-lead { margin-top: var(--espaco-4); color: var(--cor-texto-suave); font-size: var(--texto-destaque); line-height: 1.45; }
  .eyebrow { margin-bottom: var(--espaco-3); color: var(--cor-texto-apagado); font-size: var(--texto-apoio); font-weight: var(--peso-medio); letter-spacing: 0; }

  .stack > * + * { margin-top: var(--espaco-4); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-3); }
  .grid { display: grid; gap: var(--espaco-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
}

@layer components {
  /* Texto corrido (sobre, políticas, documentação): medida de leitura e hierarquia por espaço */
  .prose > * { max-width: var(--largura-texto); }
  .prose > * + * { margin-top: var(--espaco-4); }
  .prose h2 { margin-top: var(--espaco-7); font-size: var(--texto-titulo-2); }
  .prose h3 { margin-top: var(--espaco-6); }
  .prose h2 + *, .prose h3 + * { margin-top: var(--espaco-3); }
  .prose p, .prose li { color: var(--cor-texto-suave); }
  .prose strong { color: var(--cor-texto); font-weight: var(--peso-semi); }
  .prose ul, .prose ol { padding-left: 1.25em; }
  .prose li + li { margin-top: var(--espaco-2); }
  .prose a { text-decoration: underline; text-decoration-color: var(--cor-linha-forte); }
  .prose a:hover { text-decoration-color: currentColor; }
  .prose :not(pre) > code { padding: 0.1em 0.45em; background: var(--cor-superficie); border-radius: var(--raio-controle); }
  .prose a:focus-visible { border-radius: var(--raio-controle); }
  .prose pre { overflow-x: auto; padding: var(--espaco-4) var(--espaco-5); background: var(--cor-superficie); border: var(--linha); border-radius: var(--raio-cartao); line-height: 1.6; }
  .prose table { width: 100%; border-collapse: collapse; font-size: var(--texto-apoio); }
  .prose th, .prose td { padding: var(--espaco-3) var(--espaco-2); border-bottom: var(--linha); text-align: left; vertical-align: top; }
  .prose th { color: var(--cor-texto); font-weight: var(--peso-semi); }
  .table-scroll { overflow-x: auto; }
}