:root {
  --ink:      #0e0b08;
  --paper:    #f2ead8;
  --cream:    #e8dcc8;
  --gold:     #b8892a;
  --gold-lt:  #d4a94a;
  --crimson:  #7a1f1f;
  --steel:    #2c6bb4;
  --muted:    #9a8e7a;
  --rule:     rgba(184,137,42,0.4);
  --shadow:   rgba(14,11,8,0.15);
  --dark-bg:  #0e0b08;
  --dark-mid: #1c1710;
  --dark-sur: #2a2218;
  --dark-brd: #3a3020;

  /* Semantic theme layer — use these in page CSS */
  --bg:      var(--paper);
  --fg:      var(--ink);
  --surface: var(--cream);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: var(--dark-bg); --fg: var(--cream); --surface: var(--dark-sur); --crimson: #c44040; }
}
[data-theme="dark"]  { --bg: var(--dark-bg); --fg: var(--cream); --surface: var(--dark-sur); --crimson: #c44040; }
[data-theme="light"] { --bg: var(--paper);   --fg: var(--ink);   --surface: var(--cream);   --crimson: #7a1f1f; }

/* Theme toggle button (all pages) */
.theme-toggle {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9999;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--fg);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px var(--shadow);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  opacity: 0.7;
}
.theme-toggle:hover { opacity: 1; }