/* ============================================================
   PERSONALIZADO.CSS — o arquivo pra MEXER À MÃO

   Este é o único CSS do app que se edita como se edita o
   novoestilo.css das apostilas: salvou, atualizou a página, viu.
   Não precisa compilar nada, porque ele é servido direto do
   disco (fica em frontend/public/estilo/).

   Ele é carregado POR ÚLTIMO, então o que estiver aqui VENCE o
   estilo do app. Os seletores usam :root:root de propósito —
   repetir o :root aumenta a força da regra e garante a vitória
   mesmo que o navegador carregue os arquivos fora de ordem.

   Como usar: tire o /* */ /* da linha que quiser mudar, troque o
   valor e salve. O que estiver comentado não tem efeito nenhum,
   então dá pra deixar tudo aqui como um cardápio.
   ============================================================ */


/* ------------------------------------------------------------
   1. CORES DO TEMA CLARO
   Mudar um valor aqui muda o app INTEIRO de uma vez: telas,
   cartões, menus, botões. É o jeito mais rápido de experimentar.
   ------------------------------------------------------------ */
:root:root {
  /* --bg:      #f8f7f4;  fundo da página, atrás dos cartões    */
  /* --surface: #ffffff;  fundo do cartão (questão, caixa)      */
  /* --surface2:#f6f1e8;  fundo de selo, chip, campo            */

  /* --text:  #000000;  texto principal                         */
  /* --text2: #000000;  texto secundário                        */
  /* --muted: #000000;  linha de banca, órgão, ano              */
  /* --faint: #c4cad2;  o que precisa SUMIR (campo vazio)       */

  /* --border:  #e5e0d5;  borda dos cartões                     */
  /* --border2: #f0ece3;  borda fininha entre linhas            */

  /* --accent:      #0f9d94;  cor de ação (botão, link)         */
  /* --accent-soft: #cdf3ef;  fundo claro da cor de ação        */
  /* --verde-soft:  #cce5d6;  fundo do "acertou"                */
  /* --verde-forte: #2e7d46;  texto do "acertou"                */
  /* --navy:        #0f4f4c;  botão escuro                      */

  /* --sidebar-bg:     #0d3b3a;  menu da esquerda               */
  /* --sidebar-text:   #c9ded9;  texto do menu                  */
  /* --sidebar-active: #2dd4c4;  item ativo do menu             */
  /* --topbar-bg:      #f2fbfa;  barra de cima                  */
}


/* ------------------------------------------------------------
   2. FONTE E TAMANHO
   O tamanho é o da RAIZ: como o app mede tudo em rem, mexer
   aqui aumenta ou diminui a página inteira junto, sem
   desalinhar nada. 17px é o valor de hoje (o padrão era 16px).
   ------------------------------------------------------------ */
/*
html:root {
  font-size: 17px;
}
body {
  font-family: "Source Sans Pro", system-ui, sans-serif;
}
*/


/* ------------------------------------------------------------
   3. TEMA ESCURO
   Só entra quando o aluno liga o modo escuro. Cor preta aqui
   fica invisível: no escuro, o texto é claro.
   ------------------------------------------------------------ */
/*
html.dark:root {
  --bg: #0f1620;
  --surface: #18212c;
  --text: #e7ecf2;
}
*/


/* ------------------------------------------------------------
   4. PEÇAS ESPECÍFICAS
   Quando não for cor nem tamanho geral, e sim UMA peça, o
   caminho é o seletor dela. Alguns que valem ter à mão:
   ------------------------------------------------------------ */

/* Cartão da questão: menos arredondado, mais respiro
article.relative.rounded-2xl {
  border-radius: 6px;
  padding: 1.75rem;
}
*/

/* Enunciado da questão: um tico maior que o resto
.questao-enunciado, article .prose p {
  font-size: 1.05rem;
  line-height: 1.7;
}
*/

/* Alternativas mais espaçadas entre si
article ol > li {
  margin-bottom: 0.5rem;
}
*/

/* Largura da área de conteúdo (hoje 64rem = 1024px)
.pagina {
  max-width: 72rem;
}
*/


/* ------------------------------------------------------------
   5. SE ALGO NÃO OBEDECER
   Raro, mas acontece com regra do próprio app que é mais
   específica. Nesse caso, acrescente !important no valor:

       .pagina { max-width: 72rem !important; }

   Se ainda assim não pegar, é porque aquilo não é CSS: está
   escrito dentro do componente em JavaScript. Aí me chame que
   eu mexo lá.
   ------------------------------------------------------------ */