@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Sora:wght@400;600;700&display=swap");

/* ============================================================
   VOX2YOU GOIÂNIA — identidade aplicada ao núcleo

   A paleta é a mesma do VOX EDU que a equipe já usa todo dia
   (azul VOX #00A7A6, azul profundo #05555C, amarelo #F9B000) e a
   mesma do brandbook da franqueadora. Quem sai de um sistema e
   entra no outro tem que reconhecer a mesma escola.

   Três regras herdadas do brandbook, e elas valem aqui:
     · o azul é a marca — preenchimento, ícone, item ativo;
     · o amarelo é conquista, celebração e progresso; nunca erro,
       nunca alerta (isso é vermelho, outra família);
     · fundo é o azul lavado #F2F7F8, nunca branco puro na tela
       inteira — o branco fica para o cartão, que precisa subir.

   Este arquivo só troca token. Componente é do núcleo: mexer aqui
   em layout é o caminho mais curto para a próxima atualização
   quebrar a cara do sistema.
   ============================================================ */

:root {
  --vox-azul:      #00A7A6;
  --vox-azul-esc:  #007B7A;
  --vox-fundo-esc: #05555C;
  --vox-fundo-esc2:#023940;
  --vox-amarelo:   #F9B000;
  --vox-tinta:     #101D20;
  --vox-canvas:    #F2F7F8;

  /* ---------- superfícies ---------- */
  --bg:          var(--vox-canvas);
  --surface:     #FFFFFF;
  --surface-2:   #F7FBFB;
  --surface-3:   #EAF3F4;
  --border:      #CFE0E1;
  --border-soft: #E4EDEE;

  /* ---------- texto ---------- */
  --text:        var(--vox-tinta);
  --text-muted:  #4A6165;
  --text-faint:  #7C9296;

  /* ---------- marca ----------
     `--brand` pinta fundo de botão e ícone; `--brand-texto` é a versão
     escurecida, usada quando a cor vira TEXTO sobre fundo claro — o azul
     puro não passa no contraste em corpo de texto. */
  --brand:            var(--vox-azul);
  --brand-dark:       #008E8D;
  --brand-texto:      var(--vox-azul-esc);
  /* `--brand-vivo` é o botão de ação (login, salvar). No VOX EDU ele é AZUL —
     o amarelo é conquista e destaque, nunca a ação principal. Botão de entrar
     amarelo dava ao login cara de aviso. */
  --brand-vivo:       var(--vox-azul);
  --sobre-vivo:       #FFFFFF;
  --brand-soft:       #EFF7F8;
  --brand-linha:      #DEF0EF;
  --brand-contraste:  #FFFFFF;

  /* ---------- barra lateral ----------
     O azul profundo do topo do VOX EDU. O item ativo é amarelo: é assim
     que a equipe já enxerga "onde estou" no outro sistema. */
  --sidebar-bg:     var(--vox-fundo-esc);
  --sidebar-text:   #EAF7F6;
  --sidebar-muted:  #8DBDBD;
  --sidebar-faint:  #6BA3A3;
  --sidebar-border: rgba(255, 255, 255, .12);
  --sidebar-hover:  var(--vox-fundo-esc2);
  --sidebar-brand:  var(--vox-amarelo);

  /* ---------- sinais ----------
     Os mesmos quatro do VOX EDU, para verde/amarelo/vermelho quererem
     dizer a mesma coisa nos dois sistemas. */
  --green:     #10795A;   --green-bg:  #E3F4EE;
  --orange:    #9C6207;   --orange-bg: #FBF0DF;
  --red:       #BE3A32;   --red-bg:    #FBE9E7;
  --blue:      #1D6FA5;   --blue-bg:   #E5F0F8;

  /* ---------- acabamento ----------
     O núcleo é de canto seco (4px). O VOX EDU é arredondado, e é ele que
     a equipe conhece: 10px é o meio-termo que não deixa a tabela infantil
     nem o cartão duro. */
  --r:       10px;
  --radius:  10px;
  --shadow:    0 1px 2px rgba(16, 29, 32, .05);
  --shadow-lg: 0 14px 44px -14px rgba(2, 57, 64, .34);

  /* ---------- tipografia ----------
     DM Sans no corpo e Sora nos títulos e números — as duas do VOX EDU. */
  --ui:      "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Sora", "DM Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif:   "Sora", Georgia, "Times New Roman", serif;

  /* ---------- login ---------- */
  --login-bg:    var(--vox-fundo-esc);
  --login-grade: rgba(255, 255, 255, .06);
}

/* O tema escuro do núcleo continua valendo: aqui só se ajusta o que a marca
   muda de verdade, para o sistema não ficar com dois azuis diferentes. */
@media (prefers-color-scheme: dark) {
  :root {
    --brand:       #2BC4C3;
    --brand-texto: #58B8B8;
    --brand-soft:  #0C2E30;
    --brand-linha: #14464A;
  }
}

/* Especificidade: o núcleo escreve `button.primary` (0,1,1). Um seletor mais
   fraco perde a disputa e o botão continua laranja — armadilha já paga na
   implantação do Denys. */
button.primary,
.btn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #FFFFFF;
}

button.primary:hover,
.btn.primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}