/*
 * TOKENS -- a UNICA fonte de cor do projeto.
 *
 * Nenhum valor hexadecimal existe fora deste arquivo. E o que torna o dark mode uma troca de
 * variavel em vez de uma reescrita: sem isso, cada hex espalhado vira um lugar a caçar, e o
 * que se esquece aparece como texto preto sobre fundo preto.
 *
 * O Bootstrap 5.3 resolve o tema por data-bs-theme, entao os tokens abaixo apenas acompanham
 * a mesma chave -- uma fonte de verdade, nao duas.
 */

:root {
  /* Superficies e bordas. A hierarquia vem de PESO E ESPACO, nao de cor: superficies
     separadas por borda de 1px, sem sombras pesadas. */
  --cp-fundo: #f7f8fa;
  --cp-superficie: #ffffff;
  --cp-borda: #e3e6ea;
  --cp-borda-forte: #cdd2d9;

  --cp-texto: #16191d;
  --cp-texto-suave: #5b6470;

  --cp-primaria: #2b59d4;
  --cp-primaria-suave: #eaf0ff;

  --cp-perigo: #c0392b;
  --cp-atencao: #b7791f;
  --cp-sucesso: #1e7f52;

  --cp-raio: 10px;

  /* Largura da sidebar. Aqui porque e medida de layout, e o esqueleto inteiro depende dela. */
  --cp-sidebar-largura: 15.5rem;

  /* Movimento curto o bastante para nao ser notado. */
  --cp-transicao: 120ms ease;
}

[data-bs-theme='dark'] {
  --cp-fundo: #0f1216;
  --cp-superficie: #171b21;
  --cp-borda: #262c34;
  --cp-borda-forte: #333b45;

  --cp-texto: #e7eaee;
  --cp-texto-suave: #98a1ad;

  --cp-primaria: #6f95ff;
  --cp-primaria-suave: #1b2540;

  --cp-perigo: #f07167;
  --cp-atencao: #e0a458;
  --cp-sucesso: #56b98a;
}

/*
 * prefers-reduced-motion desliga tambem as bibliotecas de animacao por JS.
 *
 * Elas escrevem estilo INLINE, que uma media query comum nao alcanca -- o !important aqui e o
 * que a alcanca. Sem isso, quem pediu menos movimento continua recebendo movimento.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}