/* ══════════════════════════════════════════════════════════════════
 *  ARQUIVO GERADO — NÃO EDITE À MÃO.
 *  Origem : design/resolvesoft-tokens.json  (v1.2.0, 2026-08-01)
 *  Comando: php ferramentas/gerar-tokens.php
 *
 *  Contraste calculado por WCAG 2.2 (sRGB). Pares por modo: acento
 *  resolvido/resolvido-escuro, borda borda/borda-escura, aviso
 *  atencao/atencao-escura. Nunca usar o valor de um modo no outro — o
 *  par oposto reprova em contraste. Nenhum token é compartilhado com a
 *  marca Chamaê.
 * ══════════════════════════════════════════════════════════════════ */

:root {

  /* ── Cor ─────────────────────────────────────────────────── */
  --cor-tinta: #0E2A33;  /* cor da marca, fundo do símbolo */
  --cor-tinta-media: #1C4A57;  /* pressionado, segunda camada, gráfico */
  --cor-noite: #080B11;  /* fundo de seção escura do site (theme-color) */
  --cor-resolvido: #0E7C6B;  /* acento em fundo claro: link, botão, a peça */
    /* PROIBIDO: sobre tinta ou noite como texto (2.94 / 3.86) */
  --cor-resolvido-escuro: #2FA893;  /* acento em fundo escuro */
    /* PROIBIDO: sobre fundo claro (2.73) */
  --cor-resolvido-claro: #DCEBE7;  /* fundo de destaque, citação */
    /* PROIBIDO: acento como corpo sobre ela (4.15) */
  --cor-fundo: #F5F7F7;  /* fundo de página no modo claro */
  --cor-superficie: #FCFDFD;  /* card, campo, folha */
  --cor-texto: #10222A;  /* texto */
  --cor-texto-suave: #55696F;  /* apoio, rótulo, legenda */
  --cor-texto-escuro: #FCFDFD;  /* texto sobre noite/tinta */
  --cor-texto-suave-escuro: #9BAAB0;  /* apoio sobre noite/tinta */
  --cor-borda: #D6DEDF;  /* divisória e card — decorativa */
    /* PROIBIDO: componente interativo (1.27) */
  --cor-borda-escura: #1C2A30;  /* divisória e contorno de card sobre noite/tinta — decorativa */
    /* PROIBIDO: componente interativo (usar borda-forte, 4.90 sobre noite) */
  --cor-borda-forte: #6F8288;  /* campo, botão, caixa de seleção */
  --cor-atencao: #8A5A00;  /* aviso, prazo, pendência */
  --cor-atencao-escura: #DFAE45;  /* aviso e marcador de pendência sobre noite/tinta */
    /* PROIBIDO: fundo claro (1.90 — usar atencao #8A5A00) */
  --cor-erro: #A8301F;  /* erro, proibição */

  /* ── Tipografia (SIL OFL 1.1, local, sem CDN) ── */
  --fonte-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-dado: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --texto-display-px: 54px;
  --texto-display-linha: 1.04;
  --texto-display-peso: 600;
  --texto-display-tracking: -0.025em;
  --texto-display-celular-px: 38px;
  --texto-display-celular-linha: 1.06;
  --texto-display-celular-peso: 600;
  --texto-display-celular-tracking: -0.024em;
  --texto-titulo-px: 36px;
  --texto-titulo-linha: 1.1;
  --texto-titulo-peso: 600;
  --texto-titulo-tracking: -0.022em;
  --texto-subtitulo-px: 24px;
  --texto-subtitulo-linha: 1.3;
  --texto-subtitulo-peso: 600;
  --texto-subtitulo-tracking: -0.018em;
  --texto-destaque-px: 19px;
  --texto-destaque-linha: 1.6;
  --texto-destaque-peso: 400;
  --texto-corpo-px: 17px;
  --texto-corpo-linha: 1.6;
  --texto-corpo-peso: 400;
  --texto-apoio-px: 15px;
  --texto-apoio-linha: 1.55;
  --texto-apoio-peso: 400;
  --texto-rotulo-px: 11px;
  --texto-rotulo-linha: 1.2;
  --texto-rotulo-peso: 500;
  --texto-rotulo-tracking: 0.14em;
  --texto-dado-px: 15px;
  --texto-dado-linha: 1.5;
  --texto-dado-peso: 400;

  /* ── Espaço (base 4) ─────────────────────────────── */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-7: 44px;
  --espaco-8: 64px;
  --espaco-9: 72px;
  --espaco-secao: 64px;
  --gutter: 20px;

  /* ── Raio (nada 100% redondo; foto de perfil usa raio 12) ── */
  --raio-etiqueta: 4px;
  --raio-controle: 8px;
  --raio-card: 12px;
  --raio-folha: 20px;

  /* ── Sombra ──────────────────────────────────────────────── */
  /* nunca preto puro; nenhuma sombra sobre noite — no escuro a elevação vem de borda-escura (#1C2A30), não de sombra */
  --sombra-repouso: 0 1px 2px rgba(16,34,42,0.07);
  --sombra-elevada: 0 1px 2px rgba(16,34,42,0.08), 0 10px 24px -8px rgba(16,34,42,0.16);

  /* ── Foco e toque ────────────────────────────────────────── */
  /* obrigatório em todo controle; nunca outline:none sem substituto */
  --foco-anel: 2px solid #0E7C6B;
  --foco-anel-escuro: 2px solid #2FA893;
  --foco-folga: 2px;
  --toque-minimo: 48px;
}

/* ══════════════════════════════════════════════════════════════════
 *  Modos
 *  Use SEMPRE os nomes neutros abaixo (--acento, --borda, --aviso...).
 *  Eles resolvem para o par correto do modo em que estão, o que torna
 *  impossível cair no valor que reprova em contraste no outro fundo.
 * ══════════════════════════════════════════════════════════════════ */

:root,
.modo-claro {
  --fundo: var(--cor-fundo);
  --superficie: var(--cor-superficie);
  --texto: var(--cor-texto);
  --texto-suave: var(--cor-texto-suave);
  --acento: var(--cor-resolvido);
  --sobre-acento: var(--cor-superficie);
  --destaque: var(--cor-resolvido-claro);
  --borda: var(--cor-borda);
  --aviso: var(--cor-atencao);
  --borda-forte: var(--cor-borda-forte);   /* serve nos dois modos */
  --erro: var(--cor-erro);
  --foco: var(--foco-anel);
  color-scheme: light;
}

.modo-escuro {
  --fundo: var(--cor-noite);
  --superficie: var(--cor-tinta);
  --texto: var(--cor-texto-escuro);
  --texto-suave: var(--cor-texto-suave-escuro);
  --acento: var(--cor-resolvido-escuro);
  --sobre-acento: var(--cor-noite);
  --destaque: var(--cor-tinta);
  --borda: var(--cor-borda-escura);
  --aviso: var(--cor-atencao-escura);
  --borda-forte: var(--cor-borda-forte);
  --erro: var(--cor-erro);
  --foco: var(--foco-anel-escuro);
  color-scheme: dark;
}

/* ══════════════════════════════════════════════════════════════════
 *  Degraus tipográficos
 *  Só o degrau display muda por largura (display-celular <= 640px).
 *  Do titulo para baixo, os valores são os mesmos em celular e
 *  desktop — nunca reduzir corpo, apoio ou dado em tela pequena.
 * ══════════════════════════════════════════════════════════════════ */

.t-display {
  font-size: var(--texto-display-px);
  line-height: var(--texto-display-linha);
  font-weight: var(--texto-display-peso);
  letter-spacing: var(--texto-display-tracking);
}

.t-titulo {
  font-size: var(--texto-titulo-px);
  line-height: var(--texto-titulo-linha);
  font-weight: var(--texto-titulo-peso);
  letter-spacing: var(--texto-titulo-tracking);
}

.t-subtitulo {
  font-size: var(--texto-subtitulo-px);
  line-height: var(--texto-subtitulo-linha);
  font-weight: var(--texto-subtitulo-peso);
  letter-spacing: var(--texto-subtitulo-tracking);
}

.t-destaque {
  font-size: var(--texto-destaque-px);
  line-height: var(--texto-destaque-linha);
  font-weight: var(--texto-destaque-peso);
}

.t-corpo {
  font-size: var(--texto-corpo-px);
  line-height: var(--texto-corpo-linha);
  font-weight: var(--texto-corpo-peso);
}

.t-apoio {
  font-size: var(--texto-apoio-px);
  line-height: var(--texto-apoio-linha);
  font-weight: var(--texto-apoio-peso);
}

.t-rotulo {
  font-size: var(--texto-rotulo-px);
  line-height: var(--texto-rotulo-linha);
  font-weight: var(--texto-rotulo-peso);
  letter-spacing: var(--texto-rotulo-tracking);
  font-family: var(--fonte-dado);
  text-transform: uppercase;
}

.t-dado {
  font-size: var(--texto-dado-px);
  line-height: var(--texto-dado-linha);
  font-weight: var(--texto-dado-peso);
  font-family: var(--fonte-dado);
  font-variant-numeric: tabular-nums;
}

/* substitui display em viewport <= 640px */
@media (max-width: 640px) {
  .t-display {
    font-size: var(--texto-display-celular-px);
    line-height: var(--texto-display-celular-linha);
    letter-spacing: var(--texto-display-celular-tracking);
  }
}

/* ══════════════════════════════════════════════════════════════════
 *  Assinatura: a peça — quadrado 8x8 em resolvido
 *  Permitido : marcador antes de rótulo de seção · quarta peça do símbolo · item ativo de navegação
 *  Proibido  : marca d'água · padrão de fundo · ícone de navegação · mais de uma peça colorida
 * ══════════════════════════════════════════════════════════════════ */

.peca {
  display: inline-block;
  inline-size: var(--espaco-2);
  block-size: var(--espaco-2);
  background: var(--acento);
  flex-shrink: 0;
}

/* Foco obrigatório em todo controle — anel com folga, nunca removido. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--foco);
  outline-offset: var(--foco-folga);
}