/* ============================================================
   Aprende, tokens de design
   ------------------------------------------------------------
   Conceito tirado das peças do Jovem Aprendiz Senac-DF:

   1. campo de cor saturado ocupa a área nobre, e é nele que mora
      a tipografia grande;
   2. o conteúdo de leitura pousa em caixa clara sobre esse campo;
   3. trama de bolinhas em tom sobre tom, só dentro do campo;
   4. display ultra pesado em caixa alta com sombra dura preta
      deslocada, sem desfoque;
   5. tarja de cor chapada para rótulo pequeno;
   6. marinho como base e chão;
   7. nada de gradiente, nada de sombra macia, canto quase reto.

   Sem o arquivo da fonte da campanha, o display usa uma pilha de
   grotescas pesadas que existem em qualquer máquina. Não é a
   letra da marca, mas é o mesmo gesto: peso alto, caixa alta,
   espaçamento negativo.
   ============================================================ */

/* ------------------------------------------------------------
   Fontes, hospedadas aqui dentro. Nada de CDN: sala de aula com
   wifi ruim não pode ficar esperando fonte carregar de fora.

   Anton é o display. Grotesca ultra condensada e muito pesada,
   feita pra cartaz. É a que mais chega perto da letra das peças
   da campanha sem ser ela.

   Archivo é o corpo. Variável de 100 a 900, ligeiramente
   condensada, então conversa com o Anton em vez de brigar.
   ------------------------------------------------------------ */

@font-face {
  font-family: "Anton";
  src: url("fontes/anton.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("fontes/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --fonte: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-display: "Anton", "Archivo", "Arial Black", Impact, sans-serif;

  /* cores da campanha */
  --marca-magenta: #e6007e;
  --marca-laranja: #f04e23;
  --marca-roxo: #5b2a86;
  --marca-marinho: #0b1b5c;
  --marca-amarelo: #ffe500;
  --marca-verde: #00e27a;
  --marca-ciano: #00e0c8;
  --marca-creme: #fff8ee;
  --marca-preto: #0b0b0f;

  /* escala de espaço */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;

  --raio: 6px;
  --raio-g: 10px;
  --raio-p: 4px;

  --toque: 48px;
  --largura: 62rem;
  --largura-larga: 76rem;

  --transicao: 160ms cubic-bezier(0.2, 0, 0.2, 1);

  --sombra-dura: 6px 6px 0 var(--marca-preto);
  --sombra-dura-p: 3px 3px 0 var(--marca-preto);
  --sombra-botao: 0 5px 0 var(--marca-preto);
  --sombra-cartao: none;

  /* campo do cartaz, trocado pelo app conforme a etapa */
  --campo: var(--marca-magenta);
  --campo-trama: rgba(0, 0, 0, 0.14);
}

/* ---------- celular do aluno ---------- */
:root,
html[data-tema="solo"] {
  --fundo: #08144a;
  --fundo-2: var(--marca-marinho);
  --superficie: #12276e;
  --superficie-alta: #1c3690;
  --borda: rgba(255, 255, 255, 0.16);
  --borda-forte: rgba(255, 255, 255, 0.38);

  --texto: #ffffff;
  --texto-suave: #c8d2f4;
  --texto-fraco: #9dabdd;

  --acento: var(--marca-magenta);
  --acento-texto: #ff54ae;
  --acento-contraste: #ffffff;
  --acento-veu: rgba(230, 0, 126, 0.24);

  --destaque: var(--marca-amarelo);
  --destaque-contraste: var(--marca-preto);

  --ok: var(--marca-verde);
  --ok-veu: rgba(0, 226, 122, 0.16);
  --erro: #ff9166;
  --erro-veu: rgba(240, 78, 35, 0.24);

  --foco: var(--marca-ciano);
}

/* ---------- projetor da sala ---------- */
html[data-tema="sala"] {
  --fundo: var(--marca-creme);
  --fundo-2: #ffffff;
  --superficie: #ffffff;
  --superficie-alta: #f2e9db;
  --borda: rgba(11, 27, 92, 0.18);
  --borda-forte: var(--marca-marinho);

  --texto: var(--marca-marinho);
  --texto-suave: #3a4780;
  --texto-fraco: #5a6699;

  --acento: var(--marca-magenta);
  --acento-texto: #b80063;
  --acento-contraste: #ffffff;
  --acento-veu: rgba(230, 0, 126, 0.1);

  --destaque: var(--marca-amarelo);
  --destaque-contraste: var(--marca-preto);

  --ok: #00794a;
  --ok-veu: rgba(0, 121, 74, 0.1);
  --erro: #c4300e;
  --erro-veu: rgba(196, 48, 14, 0.09);

  --foco: var(--marca-marinho);
}

/* Tipografia base por tema. Todo o resto usa rem, então mexer
   nesta raiz aumenta a tela inteira de forma coerente. */
html { font-size: 16px; }
html[data-tema="sala"] { font-size: 21px; }

@media (max-width: 380px) {
  html { font-size: 15px; }
}
@media (max-width: 720px) {
  html[data-tema="sala"] { font-size: 17px; }
}