/* As decisões de cor, sombra e arredondamento do sistema, em um lugar só.

   Este arquivo é carregado antes do base.css e de qualquer painel, e existe
   para que "o roxo da marca" seja uma decisão tomada uma vez. Cor escrita
   direto na regra é cor que ninguém encontra depois: quando a marca mudar de
   tom, quem procurar por "#8B5CF6" vai achar trinta lugares e esquecer dois.

   Quem define um token novo deve nomeá-lo pelo papel que ele cumpre — `--erro`,
   `--borda-forte` — e não pela cor que ele tem hoje. Um `--azul` que precisa
   virar verde deixa o código mentindo. */

:root {
  --roxo: #8B5CF6;
  --roxo-escuro: #7C3AED;
  --roxo-claro: #A855F7;
  --lavanda: #EDE9FE;
  --magenta: #EC4899;

  /* ================= O fundo é lavanda, e não quase branco =================

     No desenho novo a página é lavanda e os cartões brancos flutuam sobre
     ela. É o que separa "o que é conteúdo" de "o que é página" sem precisar
     de borda em volta de tudo — e é por isso que as bordas ficaram mais
     claras e a sombra, mais funda: quem faz o recorte agora é o contraste do
     branco com o fundo, não um traço. */
  /* `--pagina` é o lavanda de trás de tudo. `--fundo` continua sendo o
     cinza-claro de dentro do cartão — chip, campo, estado de hover.

     São papéis diferentes e por isso são dois tokens. Torcer o `--fundo` para
     lavanda teria mudado 87 lugares de uma vez, a maioria deles dentro de
     cartões brancos onde o que se quer é um tom quase imperceptível. */
  --pagina: #EFECFB;
  --fundo: #F7F5FD;
  --superficie: #FFFFFF;
  --borda: #EBE7F7;
  --borda-forte: #DFD9F1;

  --tinta: #1E1B2E;
  --cinza: #7A7690;
  --cinza-fraco: #A9A5BC;

  --st-ideia: #EC4899;
  --st-producao: #3B82F6;
  /* A cor de quem está com o editor é a mesma da tesoura no resto do sistema. */
  --st-editando: #0EA5E9;
  --st-revisao: #F43F5E;
  --st-aprovado: #22C55E;
  --st-publicado: #F59E0B;
  --st-agendado: #8B5CF6;

  /* Cartão mais arredondado e campo mais alto: o desenho novo respira mais.
     Quem muda estes dois números muda a tela inteira, que é o ponto. */
  --raio-cartao: 16px;
  --raio-botao: 12px;
  --raio-campo: 10px;
  --sombra-cartao: 0 1px 2px rgb(58 42 120 / .04), 0 10px 30px -14px rgb(58 42 120 / .16);
  --grad-primario: linear-gradient(135deg, #8B5CF6, #A855F7);
  --fonte: "Poppins", ui-sans-serif, system-ui, sans-serif;
}