/* ==========================================================================
   TOKENS — variáveis globais do design system
   Cores, tipografia, espaçamento, duração e curvas de animação, sombras.
   Para mudar a identidade visual, comece por aqui.

   Fontes
   Display : Archivo (eixo de largura; ecoa o logotipo monolinear)
   Texto   : IBM Plex Sans
   Dados   : IBM Plex Mono — IDs, status, timestamps, numerais tabulares
   ========================================================================== */
:root{
  /* azul de apoio — apenas os tons em uso */
  --b-50:#EEF3FC;   /* fundo de tag e ícone */
  --b-100:#DCE6F6;  /* fundo de marcador */
  --b-200:#B9CCEC;  /* borda de tag */

  /* papéis */
  --interactive:#004DB8;         /* azul institucional — branco em cima: 7.63 */
  --interactive-hover:#003C91;
  --interactive-active:#00306F;
  --accent:#5C99F2;              /* assinatura sobre fundo escuro */

  --bg:#FFFFFF;
  --bg-soft:#F4F5F8;
  --bg-dark:#000F3C;
  --bg-deep:#000A24;

  /* fundos escuros por seção — mesma família, profundidade variada */
  --ink-hero:#000F3C;
  --ink-tech:#000A24;
  --ink-case:#071229;
  --ink-ins:#050D22;
  --ink-foot:#030817;
  --graphite:#0A1330;

  /* texto sobre fundo claro */
  --text-1:#0B1426;
  --text-2:#525C71;
  --text-3:#5F6979;

  /* texto sobre fundo escuro */
  --on-dark-1:#FFFFFF;
  --on-dark-2:#A9B6D0;
  --on-dark-3:#8494B8;

  --border:#E1E7E2;
  --border-2:#CBD5CE;
  --border-dark:rgba(255,255,255,.12);
  --border-dark-2:rgba(255,255,255,.22);

  --danger:#C21B14;
  --danger-dark:#FF8378;
  --warn:#8A5F00;

  /* escala tipográfica */
  --f-12:.75rem; --f-13:.8125rem; --f-14:.875rem; --f-15:.9375rem;
  --f-16:1rem; --f-18:1.125rem; --f-20:1.25rem;

  /* grid */
  --wrap:1296px; --gut:32px;

  /* movimento */
  --t-fast:140ms; --t-base:240ms; --t-slow:420ms; --t-reveal:700ms;
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --e-soft:cubic-bezier(.33,1,.68,1);

  /* sombras */
  --sh-1:0 1px 2px rgba(7,19,14,.05);
  --sh-2:0 2px 6px rgba(7,19,14,.05),0 12px 28px rgba(7,19,14,.07);
  --sh-3:0 4px 10px rgba(7,19,14,.05),0 32px 72px rgba(7,19,14,.13);
}

/* respiro lateral por breakpoint */
@media (max-width:1024px){ :root{--gut:26px} }
@media (max-width:600px){ :root{--gut:20px} }