/*
 * Tokens do SEB Education -- cores e famílias tipográficas.
 *
 * O CSS do site estático não tinha nenhuma custom property: repetia `#072f48` 127
 * vezes. Aqui as cores viram token, e os componentes passam a referenciá-las.
 *
 * O critério de entrada é o mesmo que a etapa B2 usou para não migrar CSS em massa:
 * só entra o que é **comprovadamente usado**, e mais de uma vez. Cor de uso único
 * chega junto do componente que a usa -- é o caso dos `fill` do mapa mundial
 * (`#1B5B80`, `#C0C0C0`), que pertencem ao plugin do mapa, não a um token global.
 *
 * **Duas das cores do modal entraram na G11, e a razão é que a premissa daqui mudou.** Esta
 * nota dizia que as cores do bloco de modal/formulário do original ficavam de fora porque era
 * "marcação que não será migrada". Ela é: o formulário dos canais virou um modal, transcrito
 * dos `modal-contact-1` a `-4` do `fale-conosco` -- que existem, com desenho completo, e que
 * ninguém tinha lido porque nenhum botão aponta para eles. Então `#5c5c5c` (o rótulo dos
 * campos) e `#d8d8d8` (a borda deles) passaram a ser usados, mais de uma vez, e viraram token.
 *
 * Na G13 o fluxo de dois passos do `modal-contact-5` voltou ao desenho do original, e com ele
 * entraram o `#009fe3`, o `#ff5c5c` e o `#999999`. Continuam fora o `#222222`, de uso único,
 * o `#647184`, sem uso, e o `#25d366`, que só o `.float__whatsapp` usava -- componente que
 * nenhum HTML referencia.
 */

:root {
  /*
   * Azul da marca -- 127 usos, de longe a cor dominante.
   *
   * Guardado também em componentes RGB porque o original escrevia o mesmo azul em
   * várias opacidades (`#072f4881`, `rgba(7, 47, 72, 0.88)`, `rgba(7, 47, 72, 0.35)`,
   * `rgba(7, 47, 72, 0.08)`…). Com os componentes separados, todas se derivam de uma
   * fonte só, via `rgb(var(--seb-azul-rgb) / <alfa>)`, e deixam de poder divergir.
   */
  --seb-azul-rgb: 7 47 72;
  --seb-azul: rgb(var(--seb-azul-rgb));

  --seb-azul-claro: #b2dce8; /* 25 usos */
  --seb-azul-vivo: #009fe3;
  --seb-vermelho: #ff5c5c;
  --seb-branco: #ffffff; /* 36 usos */
  --seb-cinza-inativo: #a1a1a1; /* 3 usos, sempre como fundo de elemento inativo */

  /*
   * O cinza quase branco das faixas do blog (I8). Entrou pelo critério deste arquivo, e não
   * por antecipação: ele começou local ao `blog.css` e virou token quando o
   * `cabecalho-do-post.css` passou a usar o mesmo valor -- o fundo da busca da listagem e o
   * da coluna de texto do post são a mesma faixa clara do desenho, e divergiriam separados.
   *
   * É o `--light-gray-color` do blog da Maple, e **não** é cor de marca: é o neutro sobre o
   * qual o azul se destaca.
   */
  --seb-cinza-fundo: #f6f6f5;

  /*
   * Os dois cinzas do formulário (G11), transcritos do modal do `fale-conosco`. Eles são um
   * par: o rótulo escrito e a borda do campo que ele nomeia, e o original os repete em cada
   * um dos 19 campos.
   */
  --seb-cinza-rotulo: #5c5c5c;
  --seb-cinza-borda: #d8d8d8;
  --seb-cinza-medio: #999999;

  /*
   * Tipografia. As fontes em si são declaradas em fontes.css.
   *
   * A divisão de papéis é a que o CSS original pratica, não uma que inventamos:
   * Arial no texto corrido (95 declarações), Manrope nos títulos (28) e Brownhill
   * Script nos trechos destacados dentro dos títulos (15).
   */
  --seb-fonte-corpo: Arial, Helvetica, sans-serif;
  --seb-fonte-titulo: 'Manrope', sans-serif;
  --seb-fonte-destaque: 'Brownhill Script', sans-serif;
}