/* ----- Theme System -----
   Modo claro/escuro com detecção de preferência do sistema.
   Use data-theme="dark" no html para forçar um tema. */

:root {
  /* Luz — padrão */
  --bg:           #fafaf7;
  --bg-elev:      #ffffff;
  --bg-sunk:      #f3f3ec;
  --ink:          #16170f;
  --ink-subtle:   #4f5045;
  --ink-faint:    #8b8c80;
  --rule:         #e6e6dc;
  --accent:       #16170f;
  --positive:     #2f7a4f;
  --negative:     #b54343;
  --warning:      #b08818;
  --serif:        'Instrument Serif', Georgia, serif;
  --sans:         'Inter', system-ui, sans-serif;
  --mono:         'JetBrains Mono', ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #1a1a18;
    --bg-elev:      #252523;
    --bg-sunk:      #1f1f1d;
    --ink:          #f5f5f0;
    --ink-subtle:   #c5c5c0;
    --ink-faint:    #7f7f7a;
    --rule:         #3a3a38;
  }
}

html[data-theme="dark"] {
  --bg:           #1a1a18;
  --bg-elev:      #252523;
  --bg-sunk:      #1f1f1d;
  --ink:          #f5f5f0;
  --ink-subtle:   #c5c5c0;
  --ink-faint:    #7f7f7a;
  --rule:         #3a3a38;
}


/* ----- Toggle de tema (compartilhado entre todas as páginas) ----- */

.theme-toggle-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-subtle);
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
  padding: 0;
}

.theme-toggle-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Ícones do toggle: lua no claro, sol no escuro */
[data-theme-toggle] .sun-only  { display: none; }
[data-theme-toggle] .moon-only { display: block; }
html[data-theme="dark"] [data-theme-toggle] .sun-only  { display: block; }
html[data-theme="dark"] [data-theme-toggle] .moon-only { display: none; }