/* =========================================================================
   Performance Fisioterapia — tokens (identidade da SAFI)
   Três camadas: primitivo (valor bruto) -> semântico (para que serve)
   -> componente (de quem é). Nenhuma tela usa cor solta: só var(--...).

   Paleta de marca MEDIDA na logo (CHANGELOG 23/10/2026, Pillow, 8 cores):
   #08457C 26,9 %  #088CAE 15,3 %  #62B455 14,3 %  #3F9362 12,1 %
   #9DD66D 12,1 %  #186082 7,8 %   #093B6A 7,4 %   #025992 4,0 %
   Amostras: círculo azul #0587C5. Não há outra cor de marca aqui.
   Fora da logo existem só: os cinzas azulados (neutros, derivados do
   marinho, sem função de marca) e o coral da nota -1 (a logo não tem
   vermelho; escolhido por contraste).

   PARES DE CONTRASTE (WCAG, medidos por script em 23/10/2026)
   Claro, texto:
     branco / marinho #08457C ............ 9,76  (texto principal, títulos)
     branco / neutro-600 #51657A ......... 6,01  (texto secundário)
     #F4F7FA / neutro-600 ................ 5,59
     branco / coral #B3321F .............. 6,19  (texto e fundo da nota -1)
     #F4F7FA / coral #B3321F ............. 5,76
     tom de coral #FDE7E3 / coral ........ 5,22
     marinho profundo #093B6A / verde claro #9DD66D .. 6,65 (nota +1)
   Claro, elemento gráfico (mínimo 3:1):
     branco / verde escuro #3F9362 ....... 3,78  (borda da nota +1, barra)
     branco / neutro-500 #6B7C8F ......... 4,28  (borda dos controles)
     branco / azul do círculo #0587C5 .... 3,98  (anel de foco)
   Escuro (fundo marinho profundo #093B6A; o degradê vai até #08457C):
     #093B6A / branco .................... 11,5
     #093B6A / neutro-200 #C9D8E6 ........ 7,83  (texto secundário)
     #093B6A / coral claro #FF9E8F ....... 5,71  (nota -1, texto e barra)
     #08457C / coral claro #FF9E8F ....... 4,90  (pior caso do degradê)
     #093B6A / verde claro #9DD66D ....... 6,65  (nota +1, texto e barra)
   Não usado como informação no escuro: #088CAE (2,91) e #0587C5 (2,86),
   só como brilho de fundo.
   ========================================================================= */

:root {
  /* ---------- 1. PRIMITIVOS ---------- */
  --marinho-500: #08457c;
  --marinho-900: #093b6a;
  --azul-aco-500: #186082;
  --azul-denso-500: #025992;
  --azul-circulo-500: #0587c5;
  --petroleo-500: #088cae;
  --verde-300: #9dd66d;
  --verde-500: #62b455;
  --verde-700: #3f9362;

  --coral-700: #b3321f;
  --coral-300: #ff9e8f;
  --coral-200: #ffc4ba;
  --coral-050: #fde7e3;

  --neutro-0: #ffffff;
  --neutro-50: #f4f7fa;
  --neutro-100: #e8eef4;
  --neutro-200: #c9d8e6;
  --neutro-300: #d5dfe9;
  --neutro-500: #6b7c8f;
  --neutro-600: #51657a;

  --fonte: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --fonte-numero: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
    Roboto, Arial, sans-serif;

  --tam-1: 0.8125rem;
  --tam-2: 0.9375rem;
  --tam-3: 1.0625rem;
  --tam-4: 1.375rem;
  --tam-5: 1.875rem;
  --tam-6: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);

  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;

  --raio-1: 8px;
  --raio-2: 12px;
  --raio-3: 20px;

  /* Movimento (curvas das skills de animação: emil-design-eng) */
  --curva-saida: cubic-bezier(0.23, 1, 0.32, 1);
  --curva-movimento: cubic-bezier(0.77, 0, 0.175, 1);
  --tempo-toque: 140ms;
  --tempo-painel: 240ms;

  /* ---------- 2. SEMÂNTICOS (tema claro = padrão) ---------- */
  --fundo: var(--neutro-50);
  --superficie: var(--neutro-0);
  --superficie-suave: var(--neutro-100);
  --texto: var(--marinho-500);
  --texto-forte: var(--marinho-900);
  --texto-suave: var(--neutro-600);
  --linha: var(--neutro-300);
  --borda-controle: var(--neutro-500);
  --acao: var(--marinho-500);
  --acao-texto: var(--neutro-0);
  --acao-hover: var(--marinho-900);
  --foco: var(--azul-circulo-500);
  --foco-nota: var(--marinho-900);
  --positivo-fundo: var(--verde-300);
  --positivo-borda: var(--verde-700);
  --positivo-texto: var(--marinho-900);
  --neutra-fundo: var(--neutro-300);
  --neutra-borda: var(--neutro-600);
  --neutra-texto: var(--marinho-900);
  --negativo-fundo: var(--coral-700);
  --negativo-borda: var(--coral-700);
  --negativo-texto: var(--neutro-0);
  --negativo-tom: var(--coral-050);
  --negativo-tinta: var(--coral-700);
  --progresso-trilho: var(--neutro-100);
  --progresso-barra: var(--verde-700);
  --faixa-fundo: var(--marinho-900);
  --faixa-texto: var(--neutro-0);

  /* ---------- 3. COMPONENTES ---------- */
  --botao-fundo: var(--acao);
  --botao-texto: var(--acao-texto);
  --botao-sec-fundo: var(--superficie);
  --botao-sec-texto: var(--texto);
  --botao-sec-borda: var(--borda-controle);
  --alvo-minimo: 44px;
  --nota-largura: 40px;
  --cartao-fundo: var(--superficie);
  --cartao-borda: var(--linha);
  --cartao-sombra: 0 1px 2px rgb(9 59 106 / 0.08), 0 4px 16px rgb(9 59 106 / 0.06);
}

@media (pointer: coarse) {
  :root { --nota-largura: 44px; }
}

/* ---------- Tema escuro: Apresentação e Ranking (TV) ---------- */
[data-tema="escuro"] {
  --fundo: var(--marinho-900);
  --superficie: rgb(255 255 255 / 0.07);
  --superficie-suave: rgb(255 255 255 / 0.11);
  --texto: var(--neutro-0);
  --texto-forte: var(--neutro-0);
  --texto-suave: var(--neutro-200);
  --linha: rgb(255 255 255 / 0.22);
  --borda-controle: var(--neutro-200);
  --acao: var(--verde-300);
  --acao-texto: var(--marinho-900);
  --acao-hover: var(--neutro-0);
  --foco: var(--verde-300);
  --positivo-borda: var(--verde-300);
  --negativo-tinta: var(--coral-300);
  --progresso-trilho: rgb(255 255 255 / 0.14);
  --progresso-barra: var(--verde-300);

  /* A29: botão principal no escuro recalcula a partir do --acao escuro */
  --botao-fundo: var(--acao);
  --botao-texto: var(--acao-texto);
  --botao-sec-fundo: rgb(255 255 255 / 0.08);
  --botao-sec-texto: var(--neutro-0);
  --botao-sec-borda: var(--neutro-200);
  --cartao-fundo: var(--superficie);
  --cartao-borda: var(--linha);
  --cartao-sombra: none;

  /* barras do ranking */
  --barra-positiva: var(--verde-300);
  --barra-negativa: var(--coral-300);
  --barra-trilho: rgb(255 255 255 / 0.1);
  --cartao-logo-fundo: var(--neutro-0);
}