/* ==========================================================================
   base.css: tokens, reset e utilitários globais
   ========================================================================== */

:root {
  /* Cor */
  --orange: #F39200;        /* preenchimentos: selo, ícones, destaques sobre escuro */
  --orange-text: #C47600;   /* texto laranja sobre fundo claro (contraste ≥ 3:1 em texto grande) */
  --ink: #111111;
  --ink-soft: #3a3a38;
  --paper: #FAFAFB;
  --white: #FFFFFF;
  --dark: #111111;

  /* Espaço */
  --gutter: clamp(20px, 5vw, 40px);

  /* Tipografia */
  --font-head: "Poppins", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

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

/* Sem overflow-x no html/body (ver CLAUDE.md): o conteúdo é contido em cada bloco. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }

a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* Largura de conteúdo com gutter que respeita as áreas seguras do telemóvel */
.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

/* Link "Ir para o conteúdo": só aparece com foco de teclado */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 8px;
}
.skip:focus { top: 12px; }