/* ==================================================================
   Tokens da home (lab, futura v3).

   Copiados de src-editorial/styles/tokens.css (v2), que continua
   intocado. As cores sao as da marca e as notas de contraste foram
   medidas na v2. Sairam a calha e as variaveis do campo geometrico, que
   a nova direcao nao usa.
   ================================================================== */
:root{
  /* ---- superficie ------------------------------------------------ */
  --paper:#FBFBFA;
  --paper-2:#F2F2EF;
  --navy:#001A29;          /* escuro principal, do logo */
  --petrol:#00354C;        /* segundo escuro, do gradiente do logo */

  /* ---- acento ---------------------------------------------------- */
  --red:#ED1C24;
  /* O mesmo vermelho, escurecido no canal R apenas para TEXTO pequeno
     sobre papel: #ED1C24 da 4.38:1 contra o off-white e reprova no piso
     de 4.5 da WCAG AA. Superficie usa --red, letra pequena usa este. */
  --red-ink:#D4141C;
  --orange:#F47521;        /* so sobre navy, onde passa no contraste */

  /* ---- tinta ----------------------------------------------------- */
  --ink:var(--navy);
  --ink-2:#45474A;         /* texto de apoio sobre papel */
  /* O cinza da marca: 4.97:1 contra o papel, passa o piso de 4.5. */
  --ink-3:#6D6E71;

  /* ---- regua ----------------------------------------------------- */
  --rule:#E2E2DE;
  --rule-strong:#C9C9C4;
  --rule-dark:rgba(255,255,255,.16);
  --rule-dark-strong:rgba(255,255,255,.30);

  /* ---- tipografia ------------------------------------------------ */
  --font-display:'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono:'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-xl:clamp(2rem, 4.6vw, 3.75rem);
  --t-lg:clamp(1.6rem, 2.9vw, 2.5rem);
  --t-md:clamp(1.25rem, 2vw, 1.75rem);
  --t-lead:clamp(1.0625rem, 1.35vw, 1.375rem);
  --t-body:clamp(1rem, 1.05vw, 1.0625rem);
  --t-mono:0.75rem;
  --t-mono-sm:0.6875rem;

  /* ---- grade -----------------------------------------------------
     Sem calha. A margem e a do logo: tudo alinha a ela. */
  --margem:clamp(1.25rem, 4vw, 4rem);
  --gutter:clamp(1rem, 2vw, 2rem);
  --max:1560px;
  --topo:clamp(4.5rem, 7.4vw, 7.75rem);   /* altura da barra */

  /* ---- curvas ---------------------------------------------------- */
  --ease-out:cubic-bezier(.16,.84,.28,1);
  --ease-in-out:cubic-bezier(.62,.03,.2,1);
}

@media (max-width:520px){
  :root{
    --margem:1rem;
    --gutter:.75rem;
  }
}

/* ------------------------------------------------------------------
   Tema por secao, aplicado por classe. A troca de fundo acontece na
   aresta da secao, sem interpolar.
   ------------------------------------------------------------------ */
:root,.t-paper{
  --bg:var(--paper);
  --fg:var(--navy);
  --fg-2:var(--ink-2);
  --fg-3:var(--ink-3);
  --linha:var(--rule);
  --linha-forte:var(--rule-strong);
  --accent:var(--red);
  --accent-ink:var(--red-ink);
}

.t-navy{
  --bg:var(--navy);
  --fg:var(--paper);
  --fg-2:rgba(251,251,250,.72);
  /* Abaixo de .60 o metadado de 11px reprova o piso de 4.5 contra o navy. */
  --fg-3:rgba(251,251,250,.62);
  --linha:var(--rule-dark);
  --linha-forte:var(--rule-dark-strong);
  --accent:var(--orange);
  --accent-ink:var(--orange);
}

.t-petrol{
  --bg:var(--petrol);
  --fg:var(--paper);
  --fg-2:rgba(251,251,250,.74);
  --fg-3:rgba(251,251,250,.64);
  --linha:var(--rule-dark);
  --linha-forte:var(--rule-dark-strong);
  --accent:var(--orange);
  --accent-ink:var(--orange);
}