/* ── Paleta Clinitalk ─────────────────────────────────────────
   Cinco azuis, duas cores de texto e um único tom quente.

   A LEI DO SISTEMA: quanto mais escuro, mais texto; quanto mais claro,
   mais superfície. NENHUMA COR FAZ OS DOIS PAPÉIS.

   Não existe escala 50→900: cada cor tem um emprego. Se você precisou de
   um sexto azul, a resposta é hierarquia, não cor nova. */
:root {
  /* Os cinco azuis */
  --royal: #5187ff;      /* ação: botão primário, item ativo, link, barra maior — azul canônico da marca */
  --azul-profundo: #2a5cc4; /* o azul que carrega TEXTO. #5187ff dá 3,35:1 e reprova em AA */
  --slate: #2a40ad;      /* título, número, nome de paciente — nunca área grande */
  --cornflower: #6997ef; /* 2º degrau, tracejado de vago, sombra do Clini — NUNCA texto */
  --sky: #9fc4f4;        /* avatar de paciente, 3º degrau — texto só em --slate */
  --lavender: #d2dff4;   /* menu lateral, 4º degrau — a única cor em área grande */

  /* Tons derivados — saem dos mesmos azuis, só para separar superfícies */
  --canvas: #f8f6f9;        /* fundo atrás dos cartões */
  --lavender-50: #edf2fb;   /* chip, bloco de agenda, marcação do Clini */
  --fio: #e4ebf7;           /* borda de cartão e divisor de linha */
  --fio-lavanda: #c3d3ec;   /* borda dentro do menu lateral */
  --branco: #ffffff;

  /* As DUAS cores de texto — não existe uma terceira.
     Texto mais fraco diminui de tamanho ou muda de peso, nunca de cor. */
  --tinta: #2a40ad;  /* título e número · 8,6:1 no branco · 6,4:1 na lavanda · 4,8:1 no sky */
  --corpo: #3f4a70;  /* corpo, rótulo, legenda · 8,7:1 no branco · 6,4:1 na lavanda */

  /* O único tom quente. Só falta, atraso e material acabando. */
  --quente: #f5a524;        /* barra e ponto */
  --quente-fundo: #fef2db;  /* fundo de chip */
  --quente-texto: #96620c;  /* texto do chip */
}

/* ── Aliases semânticos — use estes ─────────────────────────── */
:root {
  --texto-forte: var(--tinta);
  --texto-corpo: var(--corpo);
  --texto-inverso: var(--branco);
  --texto-inverso-apoio: rgba(255, 255, 255, 0.72);
  --texto-marca: var(--azul-profundo);
  --texto-link: var(--azul-profundo);
  --texto-link-hover: var(--slate);
  --texto-sobre-sky: var(--slate);
  --texto-sobre-lavanda: var(--slate);

  --fundo-tela: var(--canvas);
  --fundo-cartao: var(--branco);
  --fundo-rebaixado: var(--lavender-50);
  --fundo-lateral: var(--lavender);
  --fundo-tinta: var(--slate);
  --fundo-marca: var(--royal);
  --fundo-marca-suave: var(--lavender-50);
  --fundo-veu: rgba(42, 64, 173, 0.55);
  --fundo-vidro: rgba(255, 255, 255, 0.62);

  --linha-fina: var(--fio);
  --linha: var(--fio);
  --linha-forte: var(--fio-lavanda);
  --linha-lateral: var(--fio-lavanda);
  --linha-marca: var(--royal);
  --linha-vago: var(--cornflower);
  --linha-inversa: rgba(255, 255, 255, 0.2);

  --acao-fundo: var(--royal);
  --acao-fundo-hover: var(--slate);
  --acao-fundo-ativo: var(--slate);
  --acao-texto: var(--branco);
  --acao-2-fundo: var(--branco);
  --acao-2-fundo-hover: var(--lavender-50);
  --acao-2-texto: var(--corpo);
  --acao-fantasma-hover: var(--lavender-50);
  --acao-inversa-fundo: var(--branco);
  --acao-inversa-texto: var(--slate);
  --acao-off-fundo: var(--lavender-50);
  --acao-off-texto: var(--corpo);
  /* Destrutivo nunca é preenchido: nada apaga, então nada merece botão de perigo. */
  --acao-destrutiva-texto: #b3261e;

  /* Estados do ciclo. Aprovada é AZUL; recusada é NEUTRA.
     O quente é o recurso mais escasso do sistema. */
  --estado-espera-fundo: var(--lavender-50);
  --estado-espera-texto: var(--slate);
  --estado-espera-ponto: var(--royal);
  --estado-aprovada-fundo: var(--lavender-50);
  --estado-aprovada-texto: var(--slate);
  --estado-aprovada-ponto: var(--royal);
  --estado-enviada-fundo: var(--lavender-50);
  --estado-enviada-texto: var(--slate);
  --estado-enviada-ponto: var(--cornflower);
  --estado-recusada-fundo: var(--canvas);
  --estado-recusada-texto: var(--corpo);
  --estado-recusada-ponto: var(--fio-lavanda);
  --estado-rascunho-fundo: var(--canvas);
  --estado-rascunho-texto: var(--corpo);
  --estado-rascunho-ponto: var(--fio-lavanda);
  --estado-solta-fundo: var(--royal);
  --estado-solta-texto: var(--branco);
  --estado-solta-ponto: var(--sky);

  /* Risco: falta, atraso, material acabando. O único uso do quente. */
  --risco-fundo: var(--quente-fundo);
  --risco-texto: var(--quente-texto);
  --risco-barra: var(--quente);
  /* "travou" é risco, não erro — mesmo tom quente. */
  --estado-travada-fundo: var(--quente-fundo);
  --estado-travada-texto: var(--quente-texto);
  --estado-travada-ponto: var(--quente);

  /* Autoria: Clini é Royal; você é corpo. */
  --autoria-clini: var(--royal);
  --autoria-clini-fundo: var(--lavender-50);
  --autoria-voce: var(--corpo);
  --autoria-voce-fundo: var(--canvas);

  /* Degraus do gráfico, na ordem da paleta. */
  --grafico-1: var(--royal);
  --grafico-2: var(--cornflower);
  --grafico-3: var(--sky);
  --grafico-4: var(--lavender);

  --avatar-fundo: var(--sky);
  --avatar-texto: var(--slate);

  --anel-foco: 0 0 0 3px rgba(81, 135, 255, 0.36);
  --anel-foco-inverso: 0 0 0 3px rgba(255, 255, 255, 0.5);
}