/* ===============================
   SISTEMA DE TEMAS COM VARIÁVEIS
   =============================== */

/* Tema padrão (escuro) */
:root {
  --bg: #000000;
  --text: #ffffff;
  --muted: #a7a7a7;
  --accent: #ff4d4f;       /* para <cite> */
  --code: #7bd88f;         /* para <code> */
  --pre-bg: #000000;       /* fundo do <pre> */
}

/* Tema claro */
[data-theme="light"] {
  --bg: #ffffff;
  --text: #000000;
  --muted: #555555;
  --accent: #b00020;
  --code: #0b57d0;
  --pre-bg: #f5f5f7;
}

/* Aplicação global */
html, body {
  background: var(--bg);
  color: var(--text);
  transition: background .2s ease, color .2s ease;
  line-height: 1.6; /* espaçamento entre linhas */
}

/* ===============================
   TÍTULOS
   =============================== */
h1, h2, h3 {
  color: var(--text);
  text-align: center;
  margin-top: 2em;       /* margem superior maior */
  margin-bottom: 1em;    /* separa do texto abaixo */
}
h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }

/* ===============================
   PARÁGRAFOS E VARIAÇÕES
   =============================== */
p, .pconf, .pconf1, .pconf2 {
  color: var(--text);
  line-height: 1.7;  /* leitura mais confortável */
}
p {
  margin: 1em 0;    /* mais espaço acima e abaixo */
}
.pconf { margin: 5px 0; }
.pconf1 { margin: 15px 0 5px; }
.pconf2 { margin: 5px 0 30px; }

/* ===============================
   TEXTO CINZA (observações)
   =============================== */
.pcinza, .pcinza2, .pcinza3 {
  color: var(--muted);
}
.pcinza { margin: 0; }
.pcinza2 { margin-top: 20px; margin-bottom: 0; }
.pcinza3 { margin-top: 0; margin-bottom: 16px; }

/* ===============================
   MARCAÇÕES ESPECIAIS
   =============================== */
cite {
  color: var(--accent);
  font-size: 20px;
}
code {
  color: var(--code);
  font-size: 16px;
}
pre {
  background: var(--pre-bg);
  color: var(--text);
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
  white-space: pre;
  max-width: 100%;
  transition: background .2s ease, color .2s ease;
}
/* ===============================
   LISTAS
   =============================== */
ul, ol {
  margin: 1em 0 1em 1.5em;  /* respiro em cima/baixo e recuo */
  padding-left: 1em;
}
li {
  color: var(--text);
  margin: .5em 0;      /* espaçamento entre itens */
  line-height: 1.6;
}
li::marker { color: var(--muted); }

/* Se tiver listas secundárias, pode usar a cor “muted” */
li.muted {
  color: var(--muted);
}