/* Shared color tokens for all pages. Pages keep their own layout styles
   inline; only the palette and the theme toggle live here, so the dark
   theme is a token swap and nothing else. */

:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #4a4a4a;
  --color-text-faint: #cccccc;
  --color-accent: #1a1a1a;
  --color-rule: #1a1a1a;
  --color-vignette-mid: #e8e8e8;
  --color-vignette-edge: #d0d0d0;
  --font-main: 'Times New Roman', Times, serif;
}

/* Ink, not pure black: warm near-black center falling off to a deeper
   edge, mirroring the light vignette. Rules are muted so hairlines do
   not glow against the dark ground. */
[data-theme="dark"] {
  --color-bg: #232120;
  --color-text: #e8e4dc;
  --color-text-muted: #aaa49c;
  --color-text-faint: #55504a;
  --color-accent: #e8e4dc;
  --color-rule: #857f75;
  --color-vignette-mid: #1b1a18;
  --color-vignette-edge: #141311;
}

/* The toggle sits on its own line below the bottom nav. Every page
   container is a column flex box aligned to flex-end, so the button
   needs no width of its own to land on the rule's right edge, which is
   why this rule works unchanged on pages whose rules differ in width.
   The padding grows the hit area, and the negative right and bottom
   margins cancel it so the glyph's own edge, not its padding box, meets
   that edge. Since the margins are derived from the padding, the two
   move together and the glyph stays put whatever the padding is. The
   top margin carries the gap less the padding above the glyph, and
   repeats the 2.5rem the piece pages leave above their nav. The four
   root pages leave 3rem there and override it inline. */
.theme-toggle {
  font-family: var(--font-main);
  font-size: 0.9rem;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.85rem;
  margin: 1.65rem -0.85rem -0.85rem auto;
  transition: color 0.3s ease;
}

.theme-toggle:hover {
  color: var(--color-accent);
}

.theme-toggle:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 2px;
}