/* ==========================================================
   BASE: tokens, reset e tipografia
   Ideia visual: um caderno de escola feito à mão. Pauta azul,
   margem vermelha, recados em caneta Bic azul, fita, polaroid
   e um batom vermelho pros momentos importantes.
   ========================================================== */

:root {
  /* papéis */
  --papel: #fffcf7;
  --papel-2: #fdeef0;          /* papel rosadinho */
  --kraft: #d9b48b;
  --kraft-escuro: #a87c52;

  /* rosas e vermelhos */
  --rosa: #f29bb8;
  --rosa-forte: #e0577f;
  --rosa-claro: #ffdbe6;
  --batom: #c92a5a;

  /* tintas */
  --caneta: #2747a3;           /* caneta Bic azul: a voz dele */
  --tinta: #3a2731;            /* texto forte */
  --tinta-suave: #5c4450;      /* corpo */
  --tinta-apagada: #85707b;    /* dicas (contraste AA no papel) */

  /* caderno */
  --pauta: #c6dbef;
  --margem: #ef9a9a;
  --linha: 2rem;               /* altura da pauta */

  /* tipografia */
  --fonte-mao: 'Playwrite BR', 'Segoe Script', cursive;
  --fonte-corpo: 'Alegreya', Georgia, serif;
  --fonte-ui: 'Alegreya Sans', system-ui, sans-serif;
  --fonte-titulo: var(--fonte-corpo);

  /* profundidade */
  --sombra-papel: 0 1px 1px rgba(58, 39, 49, .08), 0 12px 26px -14px rgba(58, 39, 49, .38);
  --sombra-alta: 0 2px 3px rgba(58, 39, 49, .1), 0 22px 40px -18px rgba(58, 39, 49, .45);

  /* ritmo */
  --gutter: max(1.1rem, env(safe-area-inset-left, 0px));
  --coluna: 40rem;

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--papel);
  color: var(--tinta-suave);
  font-family: var(--fonte-corpo);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body.travado { overflow: hidden; }

img, svg { display: block; max-width: 100%; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

h1, h2, h3, p { margin: 0; }

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  color: var(--tinta);
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection { background: var(--rosa-claro); color: var(--tinta); }

:focus-visible {
  outline: 2.5px dashed var(--caneta);
  outline-offset: 4px;
  border-radius: 4px;
}

[hidden] { display: none !important; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- seções ---------- */

.secao {
  position: relative;
  padding: 4.5rem var(--gutter) 5rem;
}

.secao > .miolo,
.miolo {
  width: 100%;
  max-width: var(--coluna);
  margin-inline: auto;
}

/* rodapé */
.rodape {
  position: relative;
  padding: 2.6rem var(--gutter) calc(2.6rem + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-family: var(--fonte-mao);
  font-size: .85rem;
  color: #5a3d22;
}

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