/*
 * Ritmo visual · Módulo Componentes (15)
 *
 * A régua de espaçamento, respiro e tipografia medida no Faro Quati (06), num arquivo só, em variáveis (--rt-*).
 * Cada tela ganha uma linha de link (junto de tema-attio.css) e usa as variáveis nas próprias regras, NO PAPEL que o elemento tem:
 *
 *     <link rel="stylesheet" href="../../geral/componentes/ritmo.css">
 *
 * O ritmo do Faro Quati vale em todas as telas, SEM FORÇAR: a lógica vale para todas;
 * os valores, só onde o elemento tem o mesmo papel. Aplicação por tipo de tela:
 *   1. Quadros de obras (05, 11, 13, 16; referência 06): título da lista no tamanho de página, cartão da obra (tela-obra.css) igual ao da 06.
 *   2. Tela de trabalho da obra (cabeçalho com caminho): título compacto, sem o topo de 20 px.
 *   3. Listas e registros (07, 10, 17): cabeçalho e margens da régua; as tabelas ficam densas.
 *   4. Catálogos e regras (01, 02, 08, 14): títulos de página, de seção e de bloco nos papéis da régua; etiquetas densas a 11,5 px.
 *   5. Formulário em etapas (04): título de etapa como título de bloco; 12 px entre as etapas.
 *   6. Quadro-branco (22): só a barra de ferramentas (o quadro ocupa a tela; sem cabeçalho nem margens).
 * Só visual: nada aqui muda cor nem posição de informação. As variáveis valem nos três modos de visão (claro, escuro e leitura).
 * Os tamanhos de título vão em rem (como na 06): acompanham o tamanho de letra do navegador.
 */
html:root {
  /* ---------- Tipografia: os papéis (tamanho · peso · entrelinha) ---------- */
  --rt-corpo: 15px;                 /* corpo 15 · 500 · 1.45 · -0.01em (tema-attio.css) */
  --rt-t-pagina: 1.65rem;           /* título da página: 26,4 · 700 · 1.15 */
  --rt-t-compacto: 1.2rem;          /* título compacto (tela de trabalho): 19,2 · 700 · 1.25 */
  --rt-t-secao: 1.1rem;             /* título de seção: 17,6 · 600 · -0.015em */
  --rt-t-bloco: 1rem;               /* título de bloco e de barra recolhível: 16 · 700 */
  --rt-t-cartao: 15px;              /* título do cartão: 15 · 600 · 1.35 */
  --rt-t-grupo: 14px;               /* título de grupo: 14 · 700 */
  --rt-botao: 13px;                 /* botão: 13 · 600 (secundário 500) */
  --rt-apoio: 13px;                 /* texto de apoio: 13 · 500, cor apagada */
  --rt-sub: 12.5px;                 /* subtexto: 12,5 · 1.5 */
  --rt-etq: 12px;                   /* etiqueta: 12 · 500 */
  --rt-etq-densa: 11.5px;           /* etiqueta densa (listas longas) */
  --rt-rotulo: 11.5px;              /* rótulo em caixa alta: 11,5 · 700 · +0.06em */
  --rt-mini: 10.5px;                /* mini rótulo: 10,5 · 600 · +0.09em */
  /* Tema: o título de seção em caixa alta (Referência da análise, Balanço da obra, Constatações, o cabeçalho de cada caixa e recolhível,
     as seções dos painéis) é maior que os rótulos, no Berry da marca (--accent, que muda sozinho em cada modo de visão) sobre o tom suave
     dele (--accent-bg), numa etiqueta do tamanho do texto. Rótulos de campo, cabeçalhos de tabela e etiquetas ficam em --rt-rotulo, apagados. */
  --rt-tema: 13.5px;                /* tema: 13,5 · 700 · +0.07em, em Berry sobre fundo Berry suave */
  --rt-tema-cor: var(--accent, #A23F60);
  --rt-tema-esp: .07em;
  --rt-tema-fundo: var(--accent-bg, color-mix(in srgb, #A23F60 12%, #FDFBF7));
  --rt-tema-pad: 3px 10px;
  --rt-tema-r: 6px;

  /* ---------- Espaço (a escala: 6, 8, 12, 14, 16, 20, 22, 24) ---------- */
  --rt-cab-topo: 48px;              /* respiro acima do título da página */
  --rt-cab-pad: var(--rt-cab-topo) 16px 8px;  /* cabeçalho da página */
  --rt-cab-depois: 10px;            /* entre o título da página e o conteúdo */
  --rt-main-pad: 8px 16px 20px;     /* área do conteúdo */
  --rt-blocos: 12px;                /* entre blocos empilhados */
  --rt-colunas: 14px;               /* entre colunas */
  --rt-grupo-pad: 12px;             /* grupo (fundo rebaixado) */
  --rt-grupo-r: 10px;
  --rt-cartao-pad: 20px;            /* cartão */
  --rt-cartao-r: 14px;
  --rt-faixa: 16px;                 /* entre as faixas do cartão */
  --rt-antes-titulo: 22px;          /* antes do título do cartão, quando há faixa em cima */
  /* Celular (até 760 px): a régua da revisão de 11/11/2026. Usar só dentro de @media (max-width:760px). */
  --rt-cel-margem: 16px;            /* margem lateral de toda tela */
  --rt-cel-topo: 16px;              /* entre a barra de cima e o primeiro elemento da tela */
  --rt-cel-miudo: 12px;             /* menor letra permitida */
  --rt-cel-estado: 13px;            /* etiqueta de estado */
  --rt-cel-toque: 44px;             /* alvo de toque principal */
  --rt-cel-toque-min: 40px;         /* alvo de toque secundário (ícone) */
  --rt-cel-entre: 8px;              /* entre dois alvos vizinhos */
  --rt-btn-h: 34px;                 /* botão do cartão e da barra de ferramentas */
  --rt-btn-r: 9px;
}