/* Tokens do projeto. Toda decisão de cor, medida, raio e sombra mora aqui.
 *
 * A rampa da marca não foi derivada de cabeça: saiu do `paleta.py` a partir do
 * #3387E9 escolhido na abertura. O hex vive só neste arquivo, e a prova disso é
 * `grep -rn "#3387E9" templates/` voltar vazio.
 *
 * Achado do script, e é o que evita um erro de acessibilidade silencioso:
 * #3387E9 sobre branco dá 3,63:1. Passa como borda e ícone, que exigem 3,0, e
 * REPROVA como letra, que exige 4,5. Por isso existe --cor-primaria-texto.
 *
 * Sobre os DOIS blocos de tema escuro logo abaixo: eles são iguais de propósito,
 * e precisam continuar iguais. Um responde ao alternador ([data-tema]), o outro
 * ao sistema (prefers-color-scheme) para quem nunca clicou. CSS não deixa um
 * seletor de atributo e uma media query dividirem o mesmo bloco, então a
 * duplicação é obrigatória, e o teste `testes/test_tokens.py` existe justamente
 * para quebrar se os dois divergirem. Já divergiram uma vez, na fase 4, e o
 * resultado foi texto com 4,06:1 no tema do sistema e 5,89:1 no do botão.
 */

:root {
  /* Marca, tema claro */
  --cor-primaria: #3387E9;
  --cor-primaria-hover: #1872DC;
  --cor-primaria-escura: #135AAD;
  --cor-primaria-suave: #E7EFF8;
  --cor-primaria-soft: rgba(51, 135, 233, 0.12);
  --cor-primaria-sombra: rgba(51, 135, 233, 0.15);
  --cor-primaria-texto: #1872DC;
  --texto-sobre-cor-primaria: #000000;
  /* Cor da LETRA quando o fundo é --cor-primaria-suave, como no item ativo do
   * menu e no preset escolhido. Precisa ser token próprio: no claro ela
   * escurece, no escuro ela clareia, e quem usa não pode ter que saber em que
   * tema está. Sem ele, o item ativo do menu dava 2,2:1 no escuro. */
  --cor-primaria-em-suave: #135AAD;

  /* Superfícies */
  --fundo: #F5F7FA;
  --branco: #FFFFFF;
  --superficie: #FFFFFF;
  --superficie-2: #F8FAFC;
  --borda: #E2E8F0;
  --borda-forte: #CBD5E1;

  /* Texto */
  --texto: #1A202C;
  --texto-secundario: #475569;
  --texto-suave: #64748B;
  --texto-fraco: #64707F;

  /* Sinal */
  --perigo: #DC2626;
  --perigo-suave: #FEE2E2;
  --perigo-texto: #B91C1C;
  --alerta: #B45309;
  --alerta-suave: #FEF3C7;
  --sucesso: #15803D;
  --sucesso-suave: #DCFCE7;

  /* Tipografia */
  --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titulo: "Sora", "Inter", sans-serif;

  --fs-xs: 11.5px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;

  /* Espaço */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --sp-9: 64px;

  /* Altura de linha */
  --lh-none: 1;
  --lh-tight: 1.2;
  --lh-base: 1.5;
  --lh-relaxed: 1.6;

  /* Peso */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Forma */
  --raio-sm: 6px;
  --raio: 10px;
  --raio-lg: 16px;
  --raio-full: 999px;
  --sombra: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --sombra-alta: 0 8px 24px rgba(15, 23, 42, 0.10);
  --transicao: .16s ease;

  /* Estrutura */
  --sidebar-width: 248px;
  --topbar-h: 60px;

  /* Altura única dos controles da barra de filtros */
  --fu-h: 34px;
}

/* Tema escuro pelo alternador. Cada superfície e cada cor de texto tem par,
 * senão o alternador nasce quebrado em metade das telas. A rampa da marca é a
 * mesma, com duas trocas: o hover clareia em vez de escurecer, porque sobre
 * fundo escuro escurecer o hover some com o botão, e a letra sobre o fundo
 * suave clareia pelo mesmo motivo. */
[data-tema="escuro"] {
  --cor-primaria-hover: #589DED;
  --cor-primaria-escura: #3D7FD6;
  --cor-primaria-suave: #16283D;
  --cor-primaria-soft: rgba(51, 135, 233, 0.18);
  --cor-primaria-sombra: rgba(51, 135, 233, 0.28);
  --cor-primaria-texto: #7FB4F2;
  --cor-primaria-em-suave: #8CBCF5;

  --fundo: #0D1117;
  --branco: #161B22;
  --superficie: #161B22;
  --superficie-2: #1E2430;
  --borda: #262D38;
  --borda-forte: #363E4A;

  --texto: #E6EDF3;
  --texto-secundario: #B9C4D0;
  --texto-suave: #9AA7B7;
  --texto-fraco: #8B98A8;

  --perigo: #F87171;
  --perigo-suave: #3B1618;
  --perigo-texto: #FCA5A5;
  --alerta: #FBBF24;
  --alerta-suave: #3A2C10;
  --sucesso: #4ADE80;
  --sucesso-suave: #10301C;

  --sombra: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.18);
  --sombra-alta: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Mesmo tema escuro, para quem nunca escolheu e segue a preferência do sistema.
 * A partir do primeiro clique no alternador o [data-tema] passa a mandar, e ele
 * vence porque atributo tem precedência sobre esta media query.
 * Este bloco tem que ser IDÊNTICO ao de cima. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --cor-primaria-hover: #589DED;
    --cor-primaria-escura: #3D7FD6;
    --cor-primaria-suave: #16283D;
    --cor-primaria-soft: rgba(51, 135, 233, 0.18);
    --cor-primaria-sombra: rgba(51, 135, 233, 0.28);
    --cor-primaria-texto: #7FB4F2;
    --cor-primaria-em-suave: #8CBCF5;

    --fundo: #0D1117;
    --branco: #161B22;
    --superficie: #161B22;
    --superficie-2: #1E2430;
    --borda: #262D38;
    --borda-forte: #363E4A;

    --texto: #E6EDF3;
    --texto-secundario: #B9C4D0;
    --texto-suave: #9AA7B7;
    --texto-fraco: #8B98A8;

    --perigo: #F87171;
    --perigo-suave: #3B1618;
    --perigo-texto: #FCA5A5;
    --alerta: #FBBF24;
    --alerta-suave: #3A2C10;
    --sucesso: #4ADE80;
    --sucesso-suave: #10301C;

    --sombra: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.18);
    --sombra-alta: 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}