/*
 * 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: #1769ff;
  --cp-primaria-suave: #e8f0ff;
  --cp-sobre-primaria: #ffffff;

  --cp-perigo: #c0392b;

  /* O que se escreve EM CIMA do vermelho. Existe pelo mesmo motivo de --cp-sobre-primaria:
     sem ele, um selo vermelho no tema escuro herdaria o texto claro do tema claro. */
  --cp-sobre-perigo: #ffffff;

  --cp-atencao: #b7791f;
  --cp-atencao-suave: #fdf3e3;
  --cp-sucesso: #1e7f52;

  /*
   * AS CORES DE SERIE DO GRAFICO -- e por que elas nao sao as de cima.
   *
   * Reaproveitar primaria/sucesso/atencao como paleta de serie parece economia e nao e. Duas
   * razoes, e as duas foram MEDIDAS, nao supostas:
   *
   * O verde e o ambar deste tema ficam a distancia 7,1 em protanopia -- dentro da faixa em que
   * quem nao enxerga vermelho ve duas linhas da mesma cor. E as versoes escuras deles ficam
   * fora da faixa de luminosidade que uma marca precisa ter sobre fundo escuro: o grafico
   * escurecia junto com o tema e sumia.
   *
   * Estas tres foram escolhidas como CONJUNTO e conferidas nos dois temas contra todos os
   * pares: pior distancia 9,2 no claro e 9,4 no escuro, contra o minimo de 8. Trocar uma delas
   * sozinha desfaz a conferencia -- elas so valem juntas.
   *
   * Cor de STATUS continua sendo status: `--cp-atencao` marca o selo de divergencia na tela,
   * onde ele carrega significado. Aqui em cima elas so distinguem uma linha da outra.
   */
  --cp-serie-1: #2a78d6;
  --cp-serie-2: #eb6834;
  --cp-serie-3: #1baf7a;

  /*
   * A COR DO WHATSAPP, e ela NAO acompanha o tema.
   *
   * E cor de marca de terceiro, e nao cor deste sistema: o verde do WhatsApp e o mesmo no claro
   * e no escuro, como o azul do Facebook. Reescreve-lo no tema escuro faria o botao deixar de
   * ser reconhecivel -- e o unico trabalho dele e ser reconhecido de relance.
   *
   * Mora aqui, e nao solto no CSS, porque a regra do projeto e uma so: hexadecimal existe neste
   * arquivo. A excecao e nao acompanhar o tema, e nao morar fora.
   */
  --cp-whatsapp: #25d366;
  --cp-sobre-whatsapp: #ffffff;

  /*
   * O ACENTO DA MARCA VELOXADS -- a haste que sobe no "V" e o "Ads" do nome.
   *
   * E a cor primaria do produto (#1769ff), num token proprio porque e do DESENHO: o favicon a
   * repete como literal (arquivo solto nao le CSS), e mudar a primaria da interface nao pode mudar
   * a marca sem decisao. No tema escuro clareia, como a primaria, para nao afundar na lateral.
   */
  --cp-marca-acento: #1769ff;

  --cp-raio: 10px;

  /*
   * Largura da sidebar. Aqui porque e medida de layout, e o esqueleto inteiro depende dela.
   *
   * 17.5rem sao os 280px pedidos com a raiz no tamanho padrao. EM REM, e nao em px, porque a
   * coluna guarda TEXTO -- nomes de menu, o nome da organizacao, o email. Fixada em pixel, ela
   * nao acompanharia quem aumenta a fonte do navegador, e o que cresceria seria so o conteudo
   * dentro de uma caixa do mesmo tamanho: os rotulos passariam a cortar em reticencias
   * exatamente para quem aumentou a fonte para conseguir ler.
   */
  --cp-sidebar-largura: 17.5rem;

  /* A largura da lateral RECOLHIDA (so icones). Um token so, como a aberta. */
  --cp-sidebar-recolhida: 4.25rem;

  /*
   * A altura da navbar -- e a do cabecalho da sidebar, que e a MESMA medida.
   *
   * As duas faixas ficam lado a lado, e e daqui que sai o alinhamento entre elas: um valor so,
   * dois cabecalhos da mesma altura, os dois fios inferiores formando uma linha continua
   * atravessando a tela. Com o numero repetido nos dois lugares, mudar um deixaria um degrau de
   * poucos pixels bem no ponto para onde o olho vai primeiro.
   */
  --cp-navbar-altura: 3.25rem;

  /*
   * A familia de fonte, num token so.
   *
   * Aqui pelo mesmo motivo das cores: trocar a fonte do projeto passa a ser uma linha, e nao
   * uma cacada por `font-family` espalhado. As alternativas do sistema existem para o intervalo
   * entre a primeira pintura e a chegada do woff2 -- e para quando ele nao chega.
   */
  --cp-fonte: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

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

  /* O QR code do autenticador: preto no branco nos DOIS temas, e por isso so aqui, sem par no
     escuro. Um QR invertido e ilegivel para parte das cameras de celular. */
  --cp-qr-fundo: #ffffff;
}

[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: #5c9bff;
  --cp-marca-acento: #5c9bff;
  --cp-primaria-suave: #102340;
  --cp-sobre-primaria: #0f1216;

  --cp-perigo: #f07167;

  /* No escuro o vermelho e claro (salmao), e texto branco em cima dele quase nao se le.
     Quem contrasta aqui e o escuro. */
  --cp-sobre-perigo: #0f1216;

  --cp-atencao: #e0a458;
  --cp-atencao-suave: #3a2f1c;
  --cp-sucesso: #56b98a;

  /* Os MESMOS tres tons, degrau escuro. Nao sao outras cores: sao estas cores sobre um fundo
     escuro, escolhidas para a faixa de luminosidade que o fundo escuro exige. */
  --cp-serie-1: #3987e5;
  --cp-serie-2: #d95926;
  --cp-serie-3: #199e70;
}

/*
 * 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;
  }
}