/* Tokens de design — o tema inteiro mora aqui.
   Trocar a marca do produto é trocar este arquivo (e o nome em js/config.js).

   A paleta é escura e esportiva de propósito: a tela é lida de relance, com o
   celular apoiado no banco do supino e a mão suada. Fundo grafite reduz o brilho
   na academia e o acento VERMELHO marca a ÚNICA ação principal de cada tela.

   O vermelho virou a marca em 10/08/2026, e isso obrigou o semáforo a se mexer:
   duas coisas com a mesma cor e sentidos opostos (aperte aqui / cuidado aqui) é
   o jeito mais rápido de matar um alerta. Então o nível mais grave do semáforo
   **não é mais vermelho na tinta** — é laranja forte (`--alerta`), e a distância
   de matiz entre a marca (0°), o alerta (31°) e o âmbar (42°) foi aberta de
   propósito para os três se separarem de relance, no escuro, com a tela suja.

   O nome do nível continua "vermelho" na API, no banco e nas classes de CSS
   (`.chip--vermelho`, `.semaforo--vermelho`) porque é o vocabulário do produto —
   quem muda é só a tinta, e a tinta mora aqui.

   Âmbar e alerta não são decoração: ficam reservados ao semáforo da anamnese e
   ao radar de evasão. Se aparecerem em outro lugar, o alerta perde o efeito. */

:root {
  /* ---- Superfícies ---- */
  --fundo: #0a0c0e;
  --superficie: #13171b;
  --superficie-2: #1b2127;
  --superficie-3: #232b33;
  --borda: #262f38;
  --borda-forte: #38434e;

  /* ---- Texto ---- */
  --texto: #eef3f7;
  --texto-2: #9dabb7;
  --texto-3: #64727e;

  /* ---- Acento (ação, progresso, seleção) ---- */
  --acento: #ff2e2e;
  --acento-claro: #ff6b6b;
  --acento-escuro: #c81e1e;
  --acento-fraco: rgba(255, 46, 46, 0.14);
  --acento-fraco-2: rgba(255, 46, 46, 0.28);
  /* Texto sobre o acento continua sendo o fundo: preto sobre este vermelho dá
     5,4:1, e branco daria 3,6:1. O botão principal é o que precisa ser lido. */
  --sobre-acento: #0a0c0e;

  /* ---- Semáforo (só anamnese e evasão) ---- */
  --verde: #3ddc84;
  --verde-fraco: rgba(61, 220, 132, 0.14);
  --ambar: #ffc53d;
  --ambar-fraco: rgba(255, 197, 61, 0.14);
  /* O nível que o produto chama de "vermelho". Laranja na tinta desde que o
     vermelho virou a marca — ver o cabeçalho. */
  --alerta: #ff8c1a;
  --alerta-fraco: rgba(255, 140, 26, 0.14);

  /* ---- Apoio ---- */
  --azul: #58a6ff;
  --azul-fraco: rgba(88, 166, 255, 0.14);
  --roxo: #b98cff;
  --roxo-fraco: rgba(185, 140, 255, 0.14);

  /* ---- Tipografia ---- */
  --fonte: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", sans-serif;
  /* Números (carga, séries, sequência) pedem largura fixa: a coluna não dança
     quando o valor muda de 9 para 10 durante a série. */
  --fonte-num: "Inter", "Segoe UI Variable", system-ui, sans-serif;

  --t-xs: 11px;
  --t-sm: 13px;
  --t-md: 15px;
  --t-lg: 18px;
  --t-xl: 22px;
  --t-2xl: 28px;
  --t-3xl: 38px;
  --t-4xl: 54px;

  /* ---- Espaçamento ---- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-7: 32px;
  --e-8: 44px;

  /* ---- Formas ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 6px 20px rgba(0, 0, 0, 0.45);
  --sombra-3: 0 18px 48px rgba(0, 0, 0, 0.55);
  --sombra-acento: 0 8px 28px rgba(255, 46, 46, 0.18);

  /* ---- Medidas de layout ---- */
  --largura-celular: 460px;   /* a coluna do aluno nunca passa disso */
  --largura-painel: 1240px;   /* o painel do personal no computador */
  --altura-cabecalho: 56px;
  --altura-navegacao: 64px;
  --lateral: 236px;           /* menu lateral do personal no desktop */

  /* ---- Movimento ---- */
  --rapido: 120ms cubic-bezier(0.2, 0, 0.2, 1);
  --normal: 220ms cubic-bezier(0.2, 0, 0.2, 1);
  --lento: 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Quem pediu menos animação recebe menos animação. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --rapido: 1ms;
    --normal: 1ms;
    --lento: 1ms;
  }
}