/* PPGAdmin3 — Tokens de design
   =============================================================
   Vocabulário compartilhado da interface. Carregado antes do
   custom.css, que é quem aplica estes valores.

   Os tokens são papéis, não uma sacola de cores: o nome diz onde
   o valor se usa, não que cor ele é. Trocar `--cor-acao` repinta
   todo link de ação do sistema sem caçar hex espalhado.

   Contraste: todo par texto/fundo aqui foi medido contra os três
   fundos que a aplicação realmente usa — branco (#fff), linha
   listrada (#f9f9f9) e linha em hover (#f5f5f5). O mínimo WCAG AA
   é 4,5:1 para texto e 3:1 para controles e indicador de foco.
   As razões medidas estão anotadas em cada token.
   ============================================================= */

:root {
  /* ---- Superfícies ---- */
  --cor-fundo: #fff;
  --cor-fundo-listra: #f9f9f9;      /* .table-striped, linha ímpar */
  --cor-fundo-hover: #f5f5f5;       /* .table-hover, linha sob o cursor */
  --cor-fundo-barra: #222;          /* navbar-inverse */

  /* ---- Texto ---- */
  --cor-texto: #333;                /* 12,6:1 no branco */
  --cor-texto-suave: #6b6b6b;       /* 5,3:1 no branco — apoio, nunca corpo */
  --cor-borda: #ddd;

  /* ---- Ação ----
     #2a6496 é o link-hover-color do próprio Bootstrap 3: mantém a
     identidade e resolve o contraste. O #337ab7 padrão reprovava
     em linha listrada (4,33:1, mínimo 4,5:1). */
  --cor-acao: #2a6496;              /* 6,25:1 branco · 5,93:1 listra · 5,73:1 hover */
  --cor-acao-hover: #1f5b96;        /* 7,01:1 branco */

  /* ---- Foco ----
     Papel próprio, separado de --cor-acao: o anel de foco precisa
     ser visível também sobre elementos que já são azuis. */
  --cor-foco: #1c4f7c;              /* 8,54:1 branco */
  --foco-espessura: 3px;
  --foco-deslocamento: 2px;

  /* ---- Estados semânticos ----
     Usados sempre com um texto ou ícone ao lado; cor nunca é o
     único portador do significado. */
  --cor-sucesso: #157347;           /* 5,87:1 branco · 5,58:1 listra */
  --cor-erro: #c9302c;              /* 5,33:1 branco · 5,06:1 listra */
  --cor-alerta: #8a6d3b;            /* 5,74:1 branco */

  /* ---- Aviso persistente ----
     Faixa que fica na tela enquanto uma condição excepcional durar — hoje,
     estar vendo o sistema como outra pessoa. É fundo cheio, e não texto
     colorido, porque precisa ser notada sem ser lida.
     Papel próprio: --cor-alerta acima é cor de *texto* sobre fundo claro;
     aqui ela é o fundo, e a razão medida é outra. */
  --cor-aviso-fundo: #8a6d3b;
  --cor-aviso-texto: #fff;          /* 4,85:1 sobre --cor-aviso-fundo */

  /* ---- Espaçamento ----
     Escala de 4px. Agrupar apertado, separar generoso. */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-6: 24px;
  --espaco-8: 32px;

  /* ---- Forma ---- */
  --raio: 4px;                      /* igual ao border-radius do Bootstrap 3 */

  /* ---- Alvos de toque ----
     WCAG 2.5.8 pede 24px; a recomendação de plataforma é 44px.
     Aplicado via padding para não deformar o layout de mesa. */
  --alvo-toque: 44px;

  /* ---- Movimento ----
     Faixa de UI de produto: rápido o bastante para não ser espera. */
  --transicao: 150ms ease-out;
}

/* ---- Modo escuro (Dark mode) ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --cor-fundo: #121820;
    --cor-fundo-listra: #1a222d;
    --cor-fundo-hover: #242f3e;
    --cor-fundo-barra: #0d1117;

    --cor-texto: #e6edf3;
    --cor-texto-suave: #8b949e;
    --cor-borda: #30363d;

    --cor-acao: #58a6ff;
    --cor-acao-hover: #79c0ff;

    --cor-foco: #79c0ff;

    --cor-sucesso: #3fb950;
    --cor-erro: #f85149;
    --cor-alerta: #d29922;

    --cor-aviso-fundo: #844200;
    --cor-aviso-texto: #ffffff;
  }
}