/* =========================================================
   marinamac.net · tokens do design system
   Fonte de verdade: canvas "Design system" (Grid, Tipografia,
   Botão, Menu, Linguagem visual).
   ========================================================= */

:root {
  /* ---------- Cor ---------- */
  --tinta: #1B1816;            /* texto principal, filete forte, botão primário */
  --tinta-2: #2E2823;          /* texto secundário, rótulos */
  --papel: #F5EDDF;            /* fundo do site */
  --branco: #FFFFFF;           /* papel colado, botão secundário */
  --creme-dymo: #F4F1EA;       /* texto do botão primário */
  --caneta: #B3241A;           /* risco vermelho, botão destrutivo */
  --caneta-escura: #8E1A12;    /* pontas da caneta */
  --marca-texto: rgba(255, 238, 0, .62);
  --marca-texto-2: rgba(255, 232, 0, .32);
  --crepe: rgba(236, 222, 186, .6);

  --filete-forte: 1.5px solid var(--tinta);
  --filete-fino: 1px solid rgba(27, 24, 22, .25);

  /* ---------- Famílias ---------- */
  --serifa: "Fraunces", Georgia, serif;
  --texto: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* ---------- Escala tipográfica ---------- */
  --display: 68px;  --display-lh: 1.08;
  --h2: 40px;       --h2-lh: 1.1;
  --h3: 28px;       --h3-lh: 1.2;
  --corpo: 18px;    --corpo-lh: 28px;
  --apoio: 15px;    --apoio-lh: 24px;
  --rotulo-g: 15px; --rotulo-g-lh: 24px;
  --rotulo-m: 13px;
  --rotulo-p: 11px;
  --tracking-display: -.02em;
  --tracking-titulo: -.01em;
  --tracking-rotulo: .08em;

  /* ---------- Espaçamento (base 8) ---------- */
  --esp-0-5: 4px;
  --esp-1: 8px;
  --esp-1-5: 12px;
  --esp-2: 16px;
  --esp-3: 24px;
  --esp-4: 32px;
  --esp-6: 48px;
  --esp-8: 64px;
  --esp-12: 96px;
  --esp-16: 128px;
  --esp-20: 160px;

  /* ---------- Grid ---------- */
  --colunas: 12;
  --gutter: 24px;
  --margem: 64px;
  --largura-max: 1152px;

  /* ---------- Componentes ---------- */
  --header-altura: 56px;
  --foco: 2.5px solid var(--tinta);
  --desenho-largura: 172px;
  --fita-altura: 20px;
  --sombra-papel: 0 1px 2px rgba(27, 24, 22, .14), 0 6px 14px rgba(27, 24, 22, .06);
  --luz-hover-centro: rgba(255, 255, 255, .5);   /* luz radial do hover do case */
  --luz-hover: rgba(255, 255, 255, .4);
  --luz-hover-raio: 360px;
  --sombra-papel-hover: 0 2px 3px rgba(27, 24, 22, .14), 0 10px 20px rgba(27, 24, 22, .10);
  --transicao: .15s ease;
}

/* A margem estreita em 1023px; as colunas passam a 8 em 949px,
   junto com a troca de composição do hero, dos cases e dos pilares. */
@media (max-width: 1023px) {
  :root { --margem: 32px; }
}

@media (max-width: 949px) {
  :root { --colunas: 8; }
}

@media (max-width: 599px) {
  :root { --colunas: 4; --gutter: 16px; --margem: 20px; }
}