/* tokens.css — o vocabulário do "Living Sanctuary" (#7, variante D vencedora).
 *
 * Este arquivo NÃO estiliza nada. Ele só nomeia: cor, superfície, sombra, raio e fonte.
 * A separação é o que faz o resto do sistema envelhecer bem — trocar um degrau da escala
 * de superfície aqui repinta o produto inteiro sem que ninguém precise abrir uma tela.
 *
 * A regra que governa a estética: **nenhuma divisória.** A profundidade vem do
 * empilhamento tonal (`surface-container-*`) e da sombra ambiente, nunca de uma linha de
 * 1px. Onde uma borda parece necessária, o desenho pede `box-shadow: inset` com um dos
 * dois tokens `--ghost`.
 *
 * Sem build: são custom properties escritas à mão. A decisão do #3 (Tailwind) foi
 * revogada na #34 — um build step para produzir quatro cores e três raios cobra mais do
 * que entrega, e cobraria de novo em cada deploy.
 *
 * `--tertiary` é reservado a falta/alerta e simbolismo. Nunca área grande: ele é o
 * vermelho profundo do documento de design, e usá-lo como fundo transforma a tela num
 * aviso permanente.
 *
 * PROCEDÊNCIA. Quatro valores vêm do DESIGN.md e são fixos: `primary`, `secondary`,
 * `tertiary` e `surface`. Todo o resto — os pares `*-container`, a escala
 * `surface-container-*`, `on-surface-variant` e `outline-variant` — foi DERIVADO no
 * protótipo do #7 e validado ali na tela, não no documento. O veredito do #7 marca a
 * escala de superfície como "a peça mais discutível, revisar antes de congelar": ela
 * está congelada aqui porque o produto precisa de uma tela de pé, e revisá-la é mudar
 * este arquivo e mais nada.
 */

:root {
  /* Primárias. `--primary` é escuro a ponto de ler como neutro — é intencional. */
  --primary: #00131e;
  --on-primary: #f5faff;
  --primary-container: #0f3a52;
  --on-primary-container: #d6eaf7;
  --secondary: #795910;
  --on-secondary: #ffffff;
  --secondary-container: #f7e4bb;
  --on-secondary-container: #2a1e00;
  --secondary-fixed: #fbeed0;
  --on-secondary-fixed: #241900;
  --tertiary: #2d0004;
  --on-tertiary: #ffffff;
  --tertiary-container: #8c1a22;
  --on-tertiary-container: #ffe3e0;

  /* Superfície: os degraus do empilhamento tonal, do fundo ao elemento mais alto. */
  --surface: #f5faff;
  --surface-dim: #dde7f0;
  --surface-bright: #ffffff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f0f6fc;
  --surface-container: #e9f1f9;
  --surface-container-high: #e2ecf5;
  --surface-container-highest: #dbe7f1;

  --on-surface: #0b1a23;
  --on-surface-variant: #4d5f6b;
  --outline-variant: #7d919e;

  /* Sombra ambiente: blur alto, opacidade baixa e cor tingida em `on-surface`. Preto
   * puro suja a superfície azulada e faz o card parecer recortado, não pousado. */
  --shadow-ambient: 0 24px 56px -20px rgba(11, 26, 35, 0.14), 0 4px 18px -10px rgba(11, 26, 35, 0.06);
  --shadow-ambient-soft: 0 18px 48px -24px rgba(11, 26, 35, 0.1);

  /* Ghost border — sugestão de contorno, aplicada por `box-shadow: inset`. */
  --ghost: rgba(125, 145, 158, 0.15);
  --ghost-strong: rgba(125, 145, 158, 0.2);

  /* Estados (#41). Não são cores novas: são PAPÉIS, apontando para a paleta acima. Eles
   * moram aqui, e não na folha da agenda, porque a próxima tela que mostrar situação de
   * sessão (a ficha do paciente, #35) precisa das mesmas cores — e duas telas pintando o
   * mesmo estado de tons diferentes é como um código de cor deixa de ser lido.
   *
   * Cada estado é um par fundo/tinta, e a distinção entre eles é de MATIZ, não de
   * intensidade: azul o que está por vir, neutro o que já passou, vermelho a falta,
   * âmbar o encaixe forçado. `realizada` é o único que pede reforço de forma (um anel,
   * em agenda.css) — recuar para o neutro é o que a semântica pede, e o neutro sozinho
   * fica perto demais do azul claro da prevista para quem não distingue bem cor.
   *
   * Alguns pares saem TROCADOS de propósito (`--evento-prevista` aponta para
   * `--on-primary-container`, e a tinta para `--primary-container`). O par `X`/`on-X` do
   * Material é fundo escuro + tinta clara, e um cartão de 40px de altura pintado assim
   * numa grade horária vira uma mancha: o que se quer é o inverso — o claro do par como
   * superfície do cartão e o escuro como letra. Trocar sem inverter o par também
   * cumpriria isso, ao custo de inventar duas cores fora da paleta. */
  --evento-prevista: var(--on-primary-container);
  --on-evento-prevista: var(--primary-container);
  /* O que já aconteceu recua, e recuar aqui é ESCURECER, não clarear: um degrau de
   * superfície (o primeiro desenho deste token) deixava a realizada a um passo do azul
   * claro da prevista, e dois cartões vizinhos na mesma coluna ficavam quase iguais. Com
   * `outline-variant` a diferença é de luminância, que sobrevive à impressão em preto e
   * branco e a quem não distingue bem cor. */
  --evento-realizada: var(--outline-variant);
  --on-evento-realizada: var(--primary);
  --evento-falta: var(--on-tertiary-container);
  --on-evento-falta: var(--tertiary-container);
  --evento-encaixe: var(--secondary-container);
  --on-evento-encaixe: var(--on-secondary-container);
  --evento-encaixe-anel: var(--secondary);
  /* Bloqueio: dois degraus de superfície, que viram as listras do hachurado. */
  --evento-bloqueio-listra: var(--surface-container-highest);
  --evento-bloqueio-fundo: var(--surface-container-low);

  /* Estado de um serviço (o espelho no Google, hoje). Verde não existe nesta paleta, e
   * inventar um só para o "em dia" traria uma sexta cor ao produto para dizer o que a
   * cor da marca já diz — o que precisa saltar é o erro. */
  --estado-ok: var(--primary-container);
  --estado-erro: var(--tertiary-container);

  --radius-sm: 0.75rem;
  --radius-md: 0.85rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 999px;

  --font-display: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Alvo mínimo de toque. Vive como token porque botão, campo e ícone precisam
   * concordar — três números soltos divergem no primeiro componente novo. */
  --alvo-minimo: 44px;
}