/*
  O painel na roupa do site.

  A interface do editor não é nossa, mas a paleta e a tipografia dela são: 328
  propriedades personalizadas de CSS, e é por elas que o site entra aqui — o
  mesmo papel creme, a mesma tinta, o mesmo azul, a mesma fonte de interface.

  Quatro decisões governam este arquivo:

  1. VALORES MEDIDOS, NÃO ESCOLHIDOS. Cada par texto/fundo foi conferido no
     navegador antes de entrar, com a página servida de verdade. O que mudou foi
     matiz e saturação; a ordem de claridade da escala do editor é preservada.

  2. `!important` É NECESSÁRIO. O editor injeta o próprio estilo em tempo de
     execução, depois desta folha; sem a marca, a cascata decidiria a cor a favor
     dele. Em propriedade personalizada o `!important` não vaza para o resto.

  3. O TEMA ESCURO CASA PELO ATRIBUTO DO EDITOR, não por `prefers-color-scheme`:
     quem escolhe dentro do painel manda mais que a preferência do sistema.

  4. `-color-text` É O ACENTO USADO COMO TEXTO — e não o texto que vai sobre o
     acento. A definição de fábrica é `hsl(var(--sui-base-hue) 100% 60%)`, ou
     seja, uma COR de acento. Preenchê-la com branco, como fiz na primeira
     tentativa, pintou o rótulo dos botões secundários de branco sobre fundo
     claro: 1,2:1, ilegível, medido. O nome engana; o valor de fábrica não.

  O que NÃO é tocado, de propósito: espaçamento, tamanho de fonte, altura de
  linha e raio de canto. São as medidas que fazem tudo caber na tela, e mexer
  nelas sem poder entrar no painel trocaria beleza por risco de layout quebrado
  na mão de quem só quer publicar um conto.
*/

/*
  A fonte de interface do site, do mesmo CDN que o editor já usa para as dele —
  por isso não foi preciso abrir nada na política de segurança.
*/
@font-face {
  font-family: 'Work Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/work-sans:vf@latest/latin-wght-normal.woff2')
    format('woff2-variations');
}

:root {
  --sui-font-family-default: 'Work Sans Variable', system-ui, sans-serif !important;

  /* O matiz do editor vem de fábrica em 210; o acento do site é matiz 218. */
  --sui-base-hue: 218 !important;

  /* Fundo de botão: branco por cima dá 6,90:1. */
  --sui-primary-accent-color: #3b5a8f !important;
  --sui-primary-accent-color-light: #4a6da8 !important;
  --sui-primary-accent-color-dark: #2f4a78 !important;
  /* Acento COMO TEXTO, sobre o papel claro: 6,79:1. */
  --sui-primary-accent-color-text: #3b5a8f !important;

  /* As superfícies do site: 1 é a mais clara, 5 a mais escura. */
  --sui-background-color-1-hsl: 40 100% 99% !important;
  --sui-background-color-2-hsl: 40 47% 96% !important;
  --sui-background-color-3-hsl: 40 35% 93% !important;
  --sui-background-color-4-hsl: 40 28% 89% !important;
  --sui-background-color-5-hsl: 40 19% 85% !important;

  /* A tinta do site: título, corpo, discreto e tênue. */
  --sui-foreground-color-1-hsl: 218 15% 14% !important;
  --sui-foreground-color-2-hsl: 217 10% 25% !important;
  --sui-foreground-color-3-hsl: 214 9% 36% !important;
  --sui-foreground-color-4-hsl: 215 8% 47% !important;
}

:root[data-theme='dark'] {
  /*
    No escuro as duas exigências se opõem: o acento é FUNDO do botão principal
    (precisa ser escuro o bastante para o branco por cima) e é TEXTO do botão
    secundário (precisa ser claro o bastante sobre o fundo escuro). Por isso os
    dois papéis têm tons diferentes — branco sobre #4a6da8 dá 5,19:1; #7d9ed6
    como texto sobre a superfície escura dá 6,22:1.
  */
  --sui-primary-accent-color: #4a6da8 !important;
  --sui-primary-accent-color-light: #5a7cb8 !important;
  --sui-primary-accent-color-dark: #3b5a8f !important;
  --sui-primary-accent-color-text: #7d9ed6 !important;

  --sui-background-color-1-hsl: 220 13% 9% !important;
  --sui-background-color-2-hsl: 218 13% 12% !important;
  --sui-background-color-3-hsl: 216 13% 15% !important;
  --sui-background-color-4-hsl: 218 11% 19% !important;
  --sui-background-color-5-hsl: 217 10% 25% !important;

  --sui-foreground-color-1-hsl: 39 35% 92% !important;
  --sui-foreground-color-2-hsl: 39 18% 81% !important;
  --sui-foreground-color-3-hsl: 42 10% 62% !important;
  --sui-foreground-color-4-hsl: 41 8% 51% !important;
}