/* Os tokens do herói do nash.work: a única tabela onde moram os valores do herói.
   hero.css, campo.js e roleta.js só leem nomes daqui, nunca um número.

   Trocar o sistema que o herói veste é mexer nesta tabela e no arquivo do
   sistema (iris.css): a seção "O sistema" repõe os papéis do herói nos papéis do
   sistema, e o resto da tabela é medida do próprio herói.

   Carregue depois do kit (css/nash-*.css) e do sistema (iris.css), antes de
   hero.css. A conferência de que nada ficou solto é:
     grep -nE '#[0-9a-fA-F]{3,8}|[0-9.]+(px|rem|em|ms|s|svh|cqh|cqw|vw)\b' hero.css */

/* ---------- a escala de espaço (nash-ui) ----------
   Quatro degraus por papel: o número vem do papel, não o contrário. Todo gap e
   padding do herói é um destes quatro. */
:root {
  --heroi-espaco-interno: var(--nash-space-0); /* lidas juntas: ícone e rótulo */
  --heroi-espaco-item: var(--nash-space-1); /* irmãs do mesmo tipo: dois chips, duas linhas */
  --heroi-espaco-grupo: var(--nash-space-3); /* blocos diferentes no mesmo recipiente */
  --heroi-espaco-secao: var(--nash-space-4); /* partes diferentes da tela */
  --heroi-espaco-logo: var(--nash-space-8); /* o N até as pílulas: o respiro que o dono pediu */
  --heroi-espaco-logo-painel: var(--nash-space-5);
  --heroi-espaco-fim: var(--nash-space-6);
}

/* ---------- a paleta da landing (2026-10-13) ----------
   Chão cinza neutro, tinta quase preta e um cinza médio. O sinal é a única cor
   da tela: a luz da borda das pílulas e o rótulo da aberta. */
:root {
  --heroi-chao: #000000;
  --heroi-tinta: #f5f5f7;
  --heroi-tinta-suave: #86868b;
  --heroi-tinta-fraca: #48484a;
  --heroi-sinal: var(--accent-chat);
}

:root[data-tema='claro'] {
  --heroi-chao: #f5f5f7;
  --heroi-tinta: #1d1d1f;
  --heroi-tinta-suave: #6e6e73;
  --heroi-tinta-fraca: #a1a1a6;
}

/* O kit e o specular-stroke.js leem estes nomes: a ponte do herói pro kit. */
:root {
  --nash-color-bg-page: var(--heroi-chao);
  --nash-color-text: var(--heroi-tinta);
  --text: var(--heroi-tinta);
  --text-mid: var(--heroi-tinta-suave);
  --text-weak: var(--heroi-tinta-fraca);
  --site-signal: var(--heroi-sinal);
}

/* ---------- as pílulas (Portfólio, Store, Contato e os chips da roleta) ----------
   Escuras nos dois temas; a luz da borda é o sinal. */
:root {
  --heroi-pilula-fundo: #1d1d1f;
  --heroi-pilula-fundo-opacidade: 1;
  --heroi-pilula-texto: #f5f5f7;
  --heroi-pilula-luz: #6e6e73;
  --heroi-pilula-sombra: 0 10px 24px -14px #00000073;
  --heroi-pilula-padding: 14px var(--heroi-espaco-secao);
  --heroi-pilula-raio: 40px;
  --heroi-pilula-tipo: 1rem;
  --heroi-pilula-peso: 500;
  --heroi-pilula-letra: 0.01em;
  --heroi-pilula-apagada: 0.38;
  --heroi-pilula-aperto: 0.97;
  --heroi-pilula-luz-extensao: 24px; /* o canvas da luz passa da pílula */
  --heroi-fantasma-hover: color-mix(in srgb, var(--heroi-tinta) 8%, transparent);
  --heroi-sublinhado-espessura: 1.5px;
  --heroi-sublinhado-distancia: 5px;
}

:root:not([data-tema='claro']) {
  --heroi-pilula-fundo: #ffffff;
  --heroi-pilula-fundo-opacidade: 0.04;
  --heroi-pilula-texto: #f5f5f5;
  --heroi-pilula-luz: #525252;
}

/* ---------- alvo e foco ---------- */
:root {
  --heroi-alvo: var(--nash-target-loose); /* 44 */
  --heroi-foco-anel: 2px;
  --heroi-foco-distancia: 3px;
  --heroi-foco-cor: color-mix(in srgb, var(--heroi-tinta) 55%, transparent);
}

/* ---------- movimento ----------
   hero.css e roleta.js leem estes nomes; o JS lê por getComputedStyle. */
:root {
  --heroi-duracao-micro: var(--nash-motion-duration-micro);
  --heroi-duracao-pressao: 250ms;
  --heroi-curva-pressao: cubic-bezier(0.2, 0.8, 0.2, 1);
  --heroi-curva-saida: var(--nash-motion-ease-out);
  --heroi-roleta-saida: 240ms;
  --heroi-roleta-entrada: 320ms;
  --heroi-roleta-escada-saida: 35ms;
  --heroi-roleta-escada-entrada: 45ms;
  --heroi-roleta-deslocamento: 28px;
  --heroi-roleta-curva-saida: cubic-bezier(0.4, 0, 1, 1);
  --heroi-roleta-curva-entrada: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- o palco e o painel ---------- */
:root {
  --heroi-altura-minima: 560px;
  --heroi-palco-minimo: 20rem;
  --heroi-palco-rodape: 14svh;
  --heroi-margem: max(var(--nash-space-3), 5vw);
  --heroi-logo-altura: min(42cqh, 56cqw);
  --heroi-logo-altura-painel: min(24cqh, 40cqw);
  --heroi-largura-pilulas: 568px;
  --heroi-largura-chips: 760px;
  --heroi-largura-painel: 568px;
  --heroi-camada-chips: 5;
  --heroi-fonte: var(--font-sans);
  --heroi-tipo-base: var(--nash-type-size-4);
  --heroi-linha-base: var(--nash-type-leading-body);
}

/* ---------- os papéis de tipo (nash-ui) ----------
   O texto do herói liga a um destes dois, pelo lugar que tem na tela: corpo é o
   texto de leitura, a pergunta, o campo e a linha de estado; meta é o detalhe,
   a ficha e o nome do dado. Os títulos dos blocos vêm do Iris (iris.css). */
:root {
  --heroi-tipo-corpo: 14px;
  --heroi-entrelinha-corpo: 20px;
  --heroi-peso-corpo: 400;
  --heroi-peso-corpo-forte: 500;
  --heroi-tipo-meta: 12px;
  --heroi-entrelinha-meta: 16px;
  --heroi-peso-meta: 400;
}

/* ---------- o sistema ----------
   O herói abaixo das pílulas veste o Iris (iris.css): cada papel do herói aponta
   pro papel do sistema. Outro sistema, outra coluna da direita. */
:root {
  --heroi-fio: var(--reaction-border);
  --heroi-fio-forte: var(--reaction-panel-border-strong);
  --heroi-fio-largura: 1px;
  --heroi-titulo: var(--reaction-heading);
  --heroi-corpo: var(--reaction-text-muted);
  --heroi-texto: var(--reaction-text);
  --heroi-dica: var(--reaction-text-dim);
  --heroi-chao-sistema: var(--reaction-bg);
  --heroi-acento: var(--reaction-accent);
  --heroi-raio-campo: var(--reaction-radius-lg);
  --heroi-raio-lista: var(--reaction-radius-xl);
  --heroi-duracao-sistema: var(--reaction-dur-fast);
  --heroi-curva-sistema: var(--reaction-ease-out);

  /* o campo: a busca da Store e o Outra coisa são a mesma peça */
  --heroi-campo-fundo: var(--reaction-field);
  --heroi-campo-borda: var(--reaction-field-border);
  --heroi-campo-foco: var(--reaction-field-focus);
  --heroi-campo-altura: 40px;
  --heroi-campo-altura-max: 168px;
  --heroi-campo-icone: 16px;

  /* a escolha ligada: se inverte, pra não ficar menos marcada que as outras */
  --heroi-escolha-fundo: var(--heroi-acento);
  --heroi-escolha-texto: var(--heroi-chao-sistema);
}

/* ---------- os blocos do painel ---------- */
:root {
  --heroi-miolo-padding: var(--heroi-espaco-secao);
  --heroi-ficha-coluna: minmax(120px, 190px);

  /* a Lista de produtos */
  --heroi-icone-quadro: 32px;
  --heroi-icone-produto: 18px;
  --heroi-lista-colunas: var(--heroi-icone-quadro) minmax(0, 1fr) auto;
  --heroi-lista-colunas-estreita: var(--heroi-icone-quadro) minmax(0, 1fr);

  /* o menu de Plataformas */
  --heroi-menu-largura: 200px;
}