/* Tokens de cor e fonte dos temas claro e escuro, usados por index.html e
   login.html. O tema escuro é ligado por data-tema="escuro" no <html>
   (tema.js aplica a escolha salva antes de a página aparecer). */
:root {
  --bg: #F3F8F7;
  --superficie: #FFFFFF;
  --tinta: #142320;
  --tinta-suave: #5C6D69;
  --linha: #DCE8E5;
  --acento: #1F7A72;
  --acento-escuro: #145F58;
  --acento-suave: #E6F3F1;
  --whatsapp: #25D366;
  --ambar: #B3702E;
  --ambar-fundo: #FDF6EC;
  --ambar-borda: #E3B673;
  --sobre-acento: #FFFFFF;
  --whatsapp-suave: #EAFBF1;
  --veu: rgba(20, 35, 32, .35);

  --fonte-titulo: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-corpo: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

/* Tela escura: só os tokens mudam. O acento fica mais claro para ter
   contraste no fundo escuro, e por isso o texto sobre ele passa a ser escuro. */
:root[data-tema="escuro"] {
  --bg: #0F1716;
  --superficie: #17211F;
  --tinta: #E2EBE9;
  --tinta-suave: #93A5A1;
  --linha: #283532;
  --acento: #3AA79C;
  --acento-escuro: #6CCBC1;
  --acento-suave: #18322F;
  --ambar: #E3A766;
  --ambar-fundo: #2A2117;
  --ambar-borda: #6E5130;
  --sobre-acento: #0B1513;
  --whatsapp-suave: #11301F;
  --veu: rgba(0, 0, 0, .6);
  color-scheme: dark;
}