/* tokens.css — variáveis globais (cor, tipografia, espaço, traço).
   Fonte única de verdade: NUNCA hardcode esses valores fora daqui. */
:root {
    /* Paleta: papel amarelado + grafite/cinza. Mínimo de cores. */
    --paper:      #f2ede1;  /* fundo papel */
    --paper-box:  #f7f3ea;  /* fundo das caixas (papel um tom mais claro) */
    --dot:        #d9d1bf;  /* pontilhado do canvas (decorativo) */
    --ink:        #26251f;  /* texto principal — contraste alto sobre papel */
    --muted:      #55524a;  /* texto secundário — passa AA sobre papel */
    --line:       #3a382f;  /* traço grafite das bordas "à mão" */
    --line-soft:  #b9b3a4;  /* divisórias sutis */
    --blue:       #1f3a93;  /* azul "caneta bic" */
    --red:        #b3261e;  /* vermelho "caneta de correção" */
    --accent:     var(--blue);   /* highlight primário — foco, sublinhado de hover */
    --accent-2:   var(--red);    /* highlight secundário — reservado, sem uso ainda */

    /* Tipografia — 2 famílias self-host (ver fonts.css) */
    --font-sans:  "Montserrat", system-ui, sans-serif;   /* headlines/botões */
    --font-serif: "Merriweather", Georgia, serif;        /* texto corrido */
    --leading:    1.65;

    /* Escala de espaço (fluida onde faz sentido) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;

    /* Traço / geometria */
    --border-w: 2px;
    --radius:   14px;         /* base; caixas "à mão" sobrescrevem irregular */
    --measure:  62ch;         /* largura máxima de leitura */
}