/* 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;
  /* O roxo de preenchimento, com texto branco por cima. Calculado aqui no
     :root, ele não muda quando o escuro troca `--roxo-escuro` por um lilás de
     texto — e o botão continua roxo, com o branco legível, nos dois temas. */
  --roxo-forte: var(--roxo-escuro);
  --roxo-claro: #A855F7;
  --lavanda: #EDE9FE;
  --magenta: #EC4899;

  /* `--pagina` é o fundo de trás de tudo; `--fundo` é 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. No desenho novo os dois são o mesmo quase-branco: quem
     recorta o cartão é a borda fina e a sombra curta, e não um fundo colorido. */
  --pagina: #FAF9FC;
  --fundo: #FAF9FC;
  --superficie: #FFFFFF;
  --superficie-secundaria: #F7F6FA;
  --superficie-elevada: #FFFFFF;
  --borda: #EEECF5;
  --borda-forte: #E2DEF0;

  --tinta: #1E1B2E;
  /* Os dois cinzas são texto, e texto pede 4,5:1 (WCAG AA) no fundo da página
     e no cinza-claro dos cartões. O `--cinza-fraco` fica no limite de propósito:
     abaixo disso ele deixa de ser lido, e ninguém percebe o que sumiu. */
  --cinza: #6B6782;
  --cinza-fraco: #726E88;

  --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;

  --raio-cartao: 12px;
  --raio-botao: 10px;
  --raio-campo: 10px;
  --sombra-cartao: 0 1px 2px rgb(30 27 46 / .04), 0 8px 24px -12px rgb(30 27 46 / .08);
  /* Um tom abaixo do `--roxo`: com texto branco, os dois extremos passam de 5:1. */
  --grad-primario: linear-gradient(135deg, #7C3AED, #9333EA);
  --fonte: "Poppins", ui-sans-serif, system-ui, sans-serif;

  /* Sistema interno: uma escala compartilhada para todas as telas. */
  --pagina-max: 1600px;
  --pagina-x: 24px;
  --pagina-y: 24px;
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --raio-controle: 6px;
  --raio-operacional: 8px;
  --raio-painel: 8px;
  --raio-secao: 12px;
  --raio-especial: 16px;
  --sombra-painel: 0 1px 2px rgb(30 27 46 / .03), 0 8px 22px -16px rgb(30 27 46 / .12);
  --texto-meta: 12px;
  --texto-label: 13px;
  --texto-corpo: 14px;
  --texto-corpo-padrao: 16px;
  --texto-destaque: 18px;
  --texto-secao: 22px;
  --texto-card: 16px;
  /* O título de toda tela é um destes dois, e nenhuma escolhe o seu: o de
     destaque é só para as telas em que o título divide o topo com a arte
     (Visão geral, Persona, Projetos). */
  --texto-pagina: 32px;
  --texto-pagina-hero: 44px;
  --anel-foco: 0 0 0 3px color-mix(in srgb, var(--roxo) 24%, transparent);
  --sucesso: #15803D;
  --aviso: #92400E;
  --erro: #B4231C;
  --informacao: #2563EB;
  --sucesso-fundo: #ECFDF3;
  --aviso-fundo: #FFF7E8;
  --erro-fundo: #FFF1F0;
  --informacao-fundo: #EFF6FF;
}

@media (max-width: 1200px) {
  :root { --texto-pagina-hero: 38px; }
}
@media (max-width: 900px) {
  :root { --texto-pagina: 24px; --texto-pagina-hero: 30px; }
}
@media (max-width: 820px) {
  :root { --pagina-x: 16px; --pagina-y: 20px; }
}
@media (max-width: 520px) {
  :root { --texto-pagina: 22px; --texto-pagina-hero: 26px; }
}