:root {
  --colors-blue: #0f4c81;
  --colors-blue-deep: #0a3a63;
  --colors-mercury: #e8e6e0;
  --colors-white: #ffffff;
  --colors-error: #c41230;

  /* Texto secundario (rotulos, eyebrows, indices, dt).
     Substituem o idioma "opacity: 0.55 a 0.7" que dava entre 2.65:1 e
     3.64:1 sobre o fundo creme, abaixo do minimo AA de 4.5:1.
     Cada token e a mistura equivalente a opacidade 0.82, medida:
       --colors-blue-muted   sobre --colors-mercury : 4.74:1
       --colors-cream-muted  sobre --colors-blue    : 5.32:1
     Usar o token em vez de opacity torna o contraste previsivel e
     nao afeta os filhos do elemento. */
  --colors-blue-muted: #366892;
  --colors-cream-muted: #c1cacf;

  /* Display = Work Sans (warmer, more characterful for headlines).
     Body / UI = Inter (clean, ubiquitous, technical when wide-tracked). */
  --font-display: "Work Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "Inter", system-ui, -apple-system, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.875rem;
  --space-4: 1.25rem;
  --space-5: 1.5rem;
  --space-6: 1.875rem;
  --space-7: 2.125rem;
  --space-8: 2.5rem;
  --space-9: 2.875rem;
  --space-10: 3.25rem;
  --space-11: 3.5rem;
  --space-12: 3.75rem;
  --space-14: 4.25rem;
  --space-15: 4.5rem;
  --space-18: 5.5rem;
  --space-20: 6.25rem;
  --space-22: 7rem;
  --space-24: 7.5rem;
  --space-28: 8.75rem;
  --space-32: 10rem;
  --space-40: 12.5rem;

  /* Escala tipografica. Cada nome vale mesmo os pixeis que anuncia: antes
     --fs-10 valia 14px, --fs-12 valia tambem 14px (duplicado), --fs-14 valia
     16px, --fs-80 valia 96px e --fs-120 valia 128px. Os dois tokens que mudam
     com o ecra tem nome de papel, porque nenhum numero os descreve nos dois
     estados. Removidos --fs-48/64/80/120/160: nao eram usados em lado nenhum,
     todos os tamanhos de display vem de clamp(). */
  /* Acento. Dá 3,78:1 sobre o creme: chega para tipo grande e para marcas
     não textuais (o mínimo aí é 3:1), não chega para texto pequeno, que
     exige 4,5:1. Sobre o azul dá 1,88:1, ou seja, não se vê. Daí a regra:
     só sobre creme, só em tipo grande ou em marca. Serve para assinalar o
     estado corrente — o agora, o filtro escolhido, a sede — e o ponto final
     dos títulos. Não é cor de texto. */
  --colors-accent: #e01b53;

  --fs-10:  0.625rem;  /* 10px — etiquetas mono minimas */
  --fs-11:  0.6875rem; /* 11px — mono comprimido */
  --fs-14:  0.875rem;  /* 14px — mono, eyebrow, legendas */
  --fs-16:  1rem;      /* 16px — prosa secundaria */
  --fs-24:  1.5rem;    /* 24px — h-sub */
  --fs-32:  2rem;      /* 32px — h-card */
  --fs-body:  1rem;    /* 16px; 18px abaixo de 1024 — corpo e campos */
  --fs-field: 1.5rem;  /* 24px; 20px abaixo de 1024 — campos grandes */

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);

  --dur-200: 200ms;
  --dur-300: 300ms;
  --dur-500: 500ms;
  /* Usado pela escada do menu (.menu-primary__panel > li e .menu-side, em
     components.css). Faltava aqui: `var(--dur-700)` sem token resolve para
     invalido-no-computado, o atalho `transition` caia para o valor inicial
     (`all 0s`) e a animacao de entrada do menu nunca corria — os nomes
     apareciam todos de uma vez. Ao acrescentar tokens, procurar primeiro
     `var(--dur-` em components.css: ha mais consumidores que definicoes. */
  --dur-700: 700ms;
  --dur-800: 800ms;
  --dur-1200: 1200ms;

  --line: 1px;
  --header-h: 4.5rem;
  --grid-cols: 12;
  --grid-gap: 1.875rem;

  /* Moldura global de 4 colunas (ver docs/superpowers/specs/2026-07-27-moldura-global-4-colunas-design.md). */
  --frame-margin: var(--space-15);
  --frame-line: color-mix(in srgb, var(--colors-blue) 12%, transparent);
}

@media (max-width: 1023px) {
  :root {
    --space-15: 1.5rem;
    --space-20: 2.25rem;
    --space-24: 3rem;
    --space-32: 4rem;
    --space-40: 5rem;

    /* Faixa media (--space-6..14): eram fixos e valiam o mesmo a 390 e a
       1920px. Um padding de 40px (--space-8) e razoavel no desktop e
       excessivo no telemovel. Redefinidos aqui, propagam aos cartoes,
       seccoes e margens de todas as paginas. --space-1..5 ficam intactos:
       ja sao pequenos (4..24px). */
    --space-6:  1.25rem;   /* 30px -> 20px */
    --space-7:  1.375rem;  /* 34px -> 22px */
    --space-8:  1.5rem;    /* 40px -> 24px */
    --space-9:  1.625rem;  /* 46px -> 26px */
    --space-10: 1.75rem;   /* 52px -> 28px */
    --space-11: 1.875rem;  /* 56px -> 30px */
    --space-12: 2rem;      /* 60px -> 32px */
    --space-14: 2.25rem;   /* 68px -> 36px */
    --header-h: 3.5rem;
    --grid-cols: 6;
    --grid-gap: 1.5rem;
    --frame-line: color-mix(in srgb, var(--colors-blue) 16%, transparent);
    --fs-body: 1.125rem;   /* corpo cresce, para leitura em ecra pequeno */
    --fs-field: 1.25rem;   /* campos encolhem, para caberem */

    /* Nenhum texto abaixo de 12px em mobile. --fs-10 (10px) e --fs-11 (11px)
       eram usados em etiquetas mono e caiam a 9-10px renderizados. */
    --fs-10: 0.75rem;  /* 10px -> 12px */
    --fs-11: 0.75rem;  /* 11px -> 12px */
  }
}