/* tokens.css — fonte única de cor, espaço, tipo e tamanhos da folha.
   Regra de disciplina: hex e valor de escala só existem aqui; nos outros CSS é var().
   Três blocos, nesta ordem: primitivos → semânticos → --folha-*.
   Contrastes são recalculados por testes/tokens.test.js — o número medido manda.

   Identidade (decidida 2026-09-26): "saúde serena, teal equilibrado" — ação em
   verde-azulado profundo, neutros frios com o mesmo matiz por baixo (h≈195, não
   o slate genérico), estados quentes/frios que não competem com a ação. */

:root {
  /* ── primitivos ─────────────────────────────────────────────── */
  --cinza-900: #152528;   /* tinta: quase-preto com o matiz da casa */
  --cinza-700: #37474b;
  --cinza-600: #4a5b60;
  --cinza-500: #65787d;
  --cinza-400: #94a7ab;
  --cinza-300: #c8d5d8;
  --cinza-200: #dfe8ea;
  --cinza-100: #eef4f4;
  --cinza-50: #f6fafa;
  --teal-700: #0d7168;    /* a cor do Dose Guia */
  --teal-800: #0a5a53;
  --teal-50: #e9f6f4;
  --vermelho-700: #b3261e;
  --vermelho-50: #fdf1f0;
  --ambar-700: #8f5b00;
  --ambar-50: #fdf6e7;
  --verde-700: #1b7d3e;
  --verde-50: #edf8ef;
  --laranja-700: #a85408;  /* Tarefa 5 (13/10, §5): "Se precisar" — não é aviso (ambar) */

  /* paleta por remédio — identidade de raia, nunca estado (Ap. C, letras A–H) */
  --remedio-0: #1d4ed8;
  --remedio-1: #854d0e;
  --remedio-2: #047857;
  --remedio-3: #86198f;
  --remedio-4: #0e7490;
  --remedio-5: #3f6212;
  --remedio-6: #9333ea;
  --remedio-7: #115e59;
  --remedio-0-tinta: #1d4ed81a;
  --remedio-1-tinta: #854d0e1a;
  --remedio-2-tinta: #0478571a;
  --remedio-3-tinta: #86198f1a;
  --remedio-4-tinta: #0e74901a;
  --remedio-5-tinta: #3f62121a;
  --remedio-6-tinta: #9333ea1a;
  --remedio-7-tinta: #115e591a;

  /* ── semânticos ─────────────────────────────────────────────── */
  --cor-texto: var(--cinza-900);
  --cor-texto-secundario: var(--cinza-600);
  --cor-texto-apagado: var(--cinza-500);
  --cor-acao: var(--teal-700);
  --cor-acao-ativa: var(--teal-800);
  --cor-acao-fundo: var(--teal-50);
  --cor-fundo: #ffffff;
  --cor-fundo-suave: var(--cinza-50);
  --cor-borda: var(--cinza-200);
  --cor-borda-forte: var(--cinza-300);
  --cor-divisor: var(--cinza-100);
  --cor-erro: var(--vermelho-700);
  --cor-erro-fundo: var(--vermelho-50);
  --cor-aviso: var(--ambar-700);
  --cor-aviso-fundo: var(--ambar-50);
  --cor-ok: var(--verde-700);
  --cor-ok-fundo: var(--verde-50);
  --cor-foco: var(--teal-700);
  --cor-sos: var(--laranja-700); /* Tarefa 5 (13/10, §5): borda/selo do "Se precisar" — não é aviso */

  /* espaço — grade de 4px */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-6: 24px;
  --espaco-8: 32px;

  /* raio e sombra */
  --raio-1: 4px;
  --raio-2: 8px;
  --sombra-pop: 0 10px 30px rgba(21, 37, 40, .22);
  --sombra-folha: 0 3px 16px rgba(0, 0, 0, .25);

  /* diálogo modal (vitrine 26/09): véu e cartão */
  --raio-controle: 6px;
  --cor-veu: rgba(21, 37, 40, 0.45);
  --cor-veu-forte: rgba(21, 37, 40, 0.55);
  --sombra-dialogo: 0 12px 32px rgba(21, 37, 40, 0.3);

  /* véu claro (site): fundo translúcido sobre as faixas escuras da home */
  --cor-veu-claro: rgba(255, 255, 255, 0.12);
  --cor-veu-claro-forte: rgba(255, 255, 255, 0.15);

  /* tipo de tela */
  --tipo-base: 14px/1.4 system-ui, sans-serif;
  --tipo-rotulo-tamanho: 12px;
  --tipo-rotulo-peso: 500;
  --tipo-dose-tamanho: 14px;
  --tipo-dose-peso: 700;
  --tipo-titulo-tamanho: 18px;
  --tipo-titulo-peso: 600;

  /* ── folha (impressa, em px) ────────────────────────────────── */
  --folha-dose: 13.33px;          /* dose e hora, peso 700, tabular */
  --folha-dose-peso: 700;
  --folha-texto: 10.67px;         /* piso universal da folha */
  --folha-rotulo: 10.67px;
  --folha-rotulo-peso: 700;
  --folha-nome-remedio: 12px;
  --folha-nome-remedio-peso: 700;
  --folha-pet: 21.33px;
  --folha-dia-cabecalho: 12px;
}