/* TOKENS DE DESIGN — UM LUGAR SÓ (V2, 2026-09-15).
   Os seis temas (escuro-azul no :root; claro, preto, azul-claro, verde-claro,
   rose) e a escala de texto. Linkado ANTES de painel.css e de landing.css em
   toda página; app/styles.css (a consulta) ainda tem a própria cópia — a
   guarda testes/temas-paridade.mjs cobra a paridade dos nomes. Nasceu dos
   blocos de painel/painel.css, que eram os mais completos; a landing lia só
   um subconjunto, com dois valores divergentes (--tinta-media/-fraca). */

:root {
  /* A marca tem duas versões de cor por MEDIÇÃO: o H original some nos temas
     escuros (1,11:1 no escuro-azul) e a versão clara reprova no tema claro
     (2,89:1). Cada tema aponta para a que passa nele. */
  --marca-img: url('/marca/hiatros-em-escuro.png');
  /* tema padrão: escuro azul */
  --papel: #0a1526;
  --painel: #0f1f38;
  --campo: #142a48;
  --tinta: #eef3f9;
  --tinta-media: #c5d0de;
  --tinta-fraca: #92a2b7;
  --linha: #1e3352;
  --linha-forte: #2c4568;
  --indigo: #7fb2ff;
  --indigo-solido: #2f6fd6;
  /* O hover ESCURECE, como nos claros (21/09/2026): o #3e7de3 de antes clareava
     e o branco do .botao-primario caía a 4,00:1. */
  --indigo-solido-hover: #2a63c0;
  --indigo-fundo: #16294a;
  --indigo-linha: #35578f;
  --vivo: #ff6b5e;
  --vivo-fundo: #2a1310;
  --vivo-linha: #6b2c24;
  /* Fundo que leva TEXTO BRANCO no vermelho de perigo (21/09/2026), par do
     --indigo-solido. O --vivo dos temas escuros é um vermelho claro feito para
     ser texto sobre o escuro, e branco sobre ele dava 2,79:1 (pílula da hora,
     selos de contagem, botão de ditado gravando). Nos claros é o próprio --vivo. */
  --vivo-solido: #cc3d31;
  --ambar: #e8b768;
  --ambar-fundo: #2a2110;
  --ambar-linha: #6b4f1c;
  --proposta: #b39dff;
  --proposta-fundo: #231a3d;
  --proposta-linha: #4a3a75;
  --verde: #6fcf97;
  --grad-a: #2f6fd6;
  --grad-b: #22b8cf;
  --gradiente: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  /* Raio em três degraus: controle, cartão e pílula. Era 4px (painel/landing)
     e 3px (prontuário) pra tudo, o que deixava a interface inteira angulosa e
     sem hierarquia — um seletor de 24px e um cartão de 300px com a mesma
     curva. Os pontos que zeram raio de propósito pra emendar controles
     (.par-revisoes, .grupo-gravacao, .status-grupo, .faixa-status) usam
     border-radius: 0 explícito e continuam valendo. */
  --raio: 8px;
  --raio-cartao: 14px;
  --raio-pilula: 999px;
  --escala-texto: 1;
  /* Paleta categórica pra gráficos de pizza/coluna (Gestão) — separada de
     indigo/vivo/ambar porque esses já carregam significado semântico
     (destaque/perigo/atenção) em outros lugares do painel. */
  --grafico-1: #7fb2ff;
  --grafico-2: #22b8cf;
  --grafico-3: #e8b768;
  --grafico-4: #b98aff;
  --grafico-5: #ff8fb3;
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px -4px rgba(0, 0, 0, 0.38);
  --elev-2: 0 2px 4px rgba(0, 0, 0, 0.32), 0 10px 26px -10px rgba(0, 0, 0, 0.52);
  --elev-3: 0 4px 10px rgba(0, 0, 0, 0.38), 0 24px 56px -18px rgba(0, 0, 0, 0.62);
  --vidro-fundo: color-mix(in srgb, var(--painel) 76%, transparent);
  --vidro-borda: color-mix(in srgb, #fff 12%, transparent);
  --vidro-blur: 14px;
  --brilho-topo: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0) 62%);
  --gradiente-botao: linear-gradient(135deg, #2f6fd6, #188191);
}

:root[data-tema="claro"] {
  --marca-img: url('/marca/hiatros-em-claro.png');
  --papel: #c9d1d8;
  --painel: #e2e7eb;
  --campo: #d4dbe0;
  --tinta: #060a0f;
  --tinta-media: #1a2530;
  --tinta-fraca: #3a4756;
  --linha: #b2bcc4;
  --linha-forte: #8f9ca7;
  --indigo: #17324f;
  --indigo-solido: #17324f;
  --indigo-solido-hover: #102540;
  --indigo-fundo: #dbe3ee;
  --indigo-linha: #a9bdd6;
  --vivo: #a83f34;
  --vivo-fundo: #fbe9e6;
  --vivo-linha: #e3b3ac;
  --vivo-solido: #a83f34;
  --ambar: #8a5a0e;
  --ambar-fundo: #fbf2e0;
  --ambar-linha: #e3c692;
  --proposta: #5b3fa8;
  --proposta-fundo: #efeafb;
  --proposta-linha: #c9bce8;
  --verde: #11572f;
  --grad-a: #17324f;
  --grad-b: #0f6377;
  --grafico-1: #2f6fd6;
  --grafico-2: #0f6377;
  --grafico-3: #9a6410;
  --grafico-4: #7a4fc7;
  --grafico-5: #c23f72;
  --papel: #e3e9f0;
  --painel: #f9fbfd;
  --campo: #f1f5f9;
  --linha: #dde4ec;
  --linha-forte: #bcc7d4;
  --elev-1: 0 1px 2px rgba(16, 34, 56, 0.07), 0 2px 8px -4px rgba(16, 34, 56, 0.1);
  --elev-2: 0 2px 4px rgba(16, 34, 56, 0.08), 0 10px 26px -10px rgba(16, 34, 56, 0.16);
  --elev-3: 0 4px 10px rgba(16, 34, 56, 0.1), 0 24px 56px -18px rgba(16, 34, 56, 0.22);
  --vidro-fundo: color-mix(in srgb, var(--painel) 80%, transparent);
  --vidro-borda: color-mix(in srgb, #fff 70%, transparent);
  --vidro-blur: 14px;
  --brilho-topo: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 58%);
  --gradiente-botao: linear-gradient(135deg, #17324f, #0f6377);
}

:root[data-tema="preto"] {
  --marca-img: url('/marca/hiatros-em-escuro.png');
  --papel: #0a0a0c;
  --painel: #131316;
  --campo: #1c1c20;
  --tinta: #f1f1f3;
  --tinta-media: #d0d0d5;
  --tinta-fraca: #9a9aa2;
  --linha: #232327;
  --linha-forte: #333338;
  --indigo: #86b6ff;
  --indigo-solido: #2f6fd6;
  --indigo-solido-hover: #2a63c0;
  --indigo-fundo: #16202f;
  --indigo-linha: #35507a;
  --vivo: #ff6b5e;
  --vivo-fundo: #241412;
  --vivo-linha: #5c2c24;
  --vivo-solido: #cc3d31;
  --ambar: #e8b768;
  --ambar-fundo: #262016;
  --ambar-linha: #5c4a24;
  --proposta: #b39dff;
  --proposta-fundo: #201a2e;
  --proposta-linha: #453a63;
  --verde: #6fcf97;
  --grad-a: #2f6fd6;
  --grad-b: #22b8cf;
  --grafico-1: #86b6ff;
  --grafico-2: #22b8cf;
  --grafico-3: #e8b768;
  --grafico-4: #b98aff;
  --grafico-5: #ff8fb3;
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px -4px rgba(0, 0, 0, 0.38);
  --elev-2: 0 2px 4px rgba(0, 0, 0, 0.32), 0 10px 26px -10px rgba(0, 0, 0, 0.52);
  --elev-3: 0 4px 10px rgba(0, 0, 0, 0.38), 0 24px 56px -18px rgba(0, 0, 0, 0.62);
  --vidro-fundo: color-mix(in srgb, var(--painel) 76%, transparent);
  --vidro-borda: color-mix(in srgb, #fff 12%, transparent);
  --vidro-blur: 14px;
  --brilho-topo: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0) 62%);
  --gradiente-botao: linear-gradient(135deg, #2f6fd6, #188191);
}

:root[data-tema="azul-claro"] {
  --marca-img: url('/marca/hiatros-em-claro.png');
  --papel: #cfe3f7;
  --painel: #eef6fd;
  --campo: #dcebfa;
  --tinta: #08192c;
  --tinta-media: #1c3350;
  --tinta-fraca: #4a6483;
  --linha: #b8d2ec;
  --linha-forte: #8fb3da;
  --indigo: #1f5fa8;
  --indigo-solido: #1f5fa8;
  --indigo-solido-hover: #184b87;
  --indigo-fundo: #d3e6fa;
  --indigo-linha: #a8cbec;
  --vivo: #a83f34;
  --vivo-fundo: #fbe9e6;
  --vivo-linha: #e3b3ac;
  --vivo-solido: #a83f34;
  --ambar: #8a5a0e;
  --ambar-fundo: #fbf2e0;
  --ambar-linha: #e3c692;
  --proposta: #5b3fa8;
  --proposta-fundo: #efeafb;
  --proposta-linha: #c9bce8;
  --verde: #11572f;
  --grad-a: #2f7fd6;
  --grad-b: #17b8d8;
  --grafico-1: #1f5fa8;
  --grafico-2: #0f6377;
  --grafico-3: #9a6410;
  --grafico-4: #7a4fc7;
  --grafico-5: #c23f72;
  --papel: #d8e8f8;
  --painel: #f7fbff;
  --campo: #edf5fd;
  --linha: #d3e4f5;
  --linha-forte: #a9c8e5;
  --elev-1: 0 1px 2px rgba(16, 34, 56, 0.07), 0 2px 8px -4px rgba(16, 34, 56, 0.1);
  --elev-2: 0 2px 4px rgba(16, 34, 56, 0.08), 0 10px 26px -10px rgba(16, 34, 56, 0.16);
  --elev-3: 0 4px 10px rgba(16, 34, 56, 0.1), 0 24px 56px -18px rgba(16, 34, 56, 0.22);
  --vidro-fundo: color-mix(in srgb, var(--painel) 80%, transparent);
  --vidro-borda: color-mix(in srgb, #fff 70%, transparent);
  --vidro-blur: 14px;
  --brilho-topo: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 58%);
  --gradiente-botao: linear-gradient(135deg, #2c76c7, #108197);
}

/* Verde claro. ESTE BLOCO NÃO EXISTIA — e a falta era um defeito visível.
 *
 * `painel/perfil.html` oferece "verde-claro" na lista de temas e
 * `public/parear-microfone.html` o traz entre os cinco válidos; `app/styles.css`
 * e `public/landing.css` definem os tokens dele. Só este arquivo não tinha
 * nenhum. Quem escolhia o tema ficava com o prontuário em verde-claro e o
 * PAINEL INTEIRO travado no escuro-azul — agenda, pacientes, gestão e o próprio
 * Perfil onde acabou de escolher. Metade do produto ignorava a escolha, sem
 * erro nenhum, porque `data-tema` sem bloco correspondente simplesmente cai no
 * `:root`.
 *
 * Contaminou até a verificação: a varredura media "contraste painel
 * verde-claro" e reportava números que eram, em silêncio, os do tema escuro.
 *
 * Valores portados de `app/styles.css`, com as superfícies já no
 * rebalanceamento dos claros. `--vivo` e `--ambar` ficam em vermelho e âmbar de
 * propósito, como nos outros temas: são semânticos (perigo/atenção) e perdem o
 * significado se virarem verde junto com o resto. */
:root[data-tema="verde-claro"] {
  --marca-img: url('/marca/hiatros-em-claro.png');
  --papel: #daeee2;
  --painel: #f7fdf9;
  --campo: #eef8f2;
  --tinta: #082014;
  --tinta-media: #1d4030;
  --tinta-fraca: #4b6e5c;
  --linha: #d2e9db;
  --linha-forte: #a8cdb7;
  --indigo: #1c6b45;
  --indigo-solido: #1c6b45;
  --indigo-solido-hover: #145436;
  --indigo-fundo: #d5efdf;
  --indigo-linha: #a8d4ba;
  --vivo: #a83f34;
  --vivo-fundo: #fbe9e6;
  --vivo-linha: #e3b3ac;
  --vivo-solido: #a83f34;
  --ambar: #8a6212;
  --ambar-fundo: #faf2df;
  --ambar-linha: #e0c58f;
  --proposta: #4f3799;
  --proposta-fundo: #ece6f9;
  --proposta-linha: #c3b5e4;
  --verde: #11572f;
  --grad-a: #1c6b45;
  --grad-b: #29a37a;
  /* O verde lidera a paleta categórica, mas os outros quatro NÃO podem ser
     verdes também — gráfico de pizza com cinco tons da mesma família não se lê.
     Mesma escolha dos outros temas claros. */
  --grafico-1: #1c6b45;
  --grafico-2: #2f6fd6;
  --grafico-3: #9a6410;
  --grafico-4: #7a4fc7;
  --grafico-5: #c23f72;
  --elev-1: 0 1px 2px rgba(16, 34, 56, 0.07), 0 2px 8px -4px rgba(16, 34, 56, 0.1);
  --elev-2: 0 2px 4px rgba(16, 34, 56, 0.08), 0 10px 26px -10px rgba(16, 34, 56, 0.16);
  --elev-3: 0 4px 10px rgba(16, 34, 56, 0.1), 0 24px 56px -18px rgba(16, 34, 56, 0.22);
  --vidro-fundo: color-mix(in srgb, var(--painel) 80%, transparent);
  --vidro-borda: color-mix(in srgb, #fff 70%, transparent);
  --vidro-blur: 14px;
  --brilho-topo: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 58%);
  --gradiente-botao: linear-gradient(135deg, #1c6b45, #218262);
}

:root[data-tema="rose"] {
  --marca-img: url('/marca/hiatros-em-claro.png');
  --papel: #e8d5d6;
  --painel: #f8ecec;
  --campo: #f0e0e1;
  --tinta: #2e1a1c;
  --tinta-media: #513035;
  --tinta-fraca: #7d5a5f;
  --linha: #d9bfc1;
  --linha-forte: #bf9a9e;
  --indigo: #8a3f52;
  --indigo-solido: #8a3f52;
  --indigo-solido-hover: #6f313f;
  --indigo-fundo: #f0dde0;
  --indigo-linha: #dbb3ba;
  --vivo: #b8432f;
  --vivo-fundo: #fbe9e6;
  --vivo-linha: #e3b3ac;
  --vivo-solido: #b8432f;
  --ambar: #8a5a0e;
  --ambar-fundo: #fbf2e0;
  --ambar-linha: #e3c692;
  --proposta: #5b3fa8;
  --proposta-fundo: #f0eafa;
  --proposta-linha: #cabce6;
  --verde: #11572f;
  --grad-a: #8a3f52;
  --grad-b: #c96a7a;
  --grafico-1: #8a3f52;
  --grafico-2: #3f7a8a;
  --grafico-3: #9a6410;
  --grafico-4: #7a4fc7;
  --grafico-5: #3f7a4f;
  --papel: #f0dcdd;
  --painel: #fdf7f8;
  --campo: #fbf1f2;
  --linha: #ecd6d8;
  --linha-forte: #d3b0b4;
  --elev-1: 0 1px 2px rgba(16, 34, 56, 0.07), 0 2px 8px -4px rgba(16, 34, 56, 0.1);
  --elev-2: 0 2px 4px rgba(16, 34, 56, 0.08), 0 10px 26px -10px rgba(16, 34, 56, 0.16);
  --elev-3: 0 4px 10px rgba(16, 34, 56, 0.1), 0 24px 56px -18px rgba(16, 34, 56, 0.22);
  --vidro-fundo: color-mix(in srgb, var(--painel) 80%, transparent);
  --vidro-borda: color-mix(in srgb, #fff 70%, transparent);
  --vidro-blur: 14px;
  --brilho-topo: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 58%);
  --gradiente-botao: linear-gradient(135deg, #8a3f52, #ad5b69);
}

/* Tamanho do texto — diferente do prontuário (que só escala conteúdo
   clínico), aqui escala a página inteira: painel/perfil não têm painel
   denso pra proteger, é tudo formulário/lista. */
:root[data-tamanho="grande"] {
  --escala-texto: 1.15;
}

:root[data-tamanho="maior"] {
  --escala-texto: 1.3;
}