/* ===== THEME =====
 * Edit these variables to re-skin the entire site.
 * Colors, fonts, spacing — all in one place.
 * After saving, refresh the browser. No build step.
 */

:root {
  /* colors */
  --bg:           #f4ecd8;   /* page background */
  --fg:           #2a2118;   /* main text */
  --muted:        #6b5d4f;   /* secondary text */
  --accent:       #b94a3a;   /* highlights, hovers */
  --link:         #356b8a;   /* link color */
  --link-visited: #6a4a8a;
  --frame-bg:    #fffaf0;    /* card / frame fill */
  --frame-border:#5a4632;    /* card / frame border */
  --header-bg:   #2a2118;    /* top header */
  --header-fg:   #f4ecd8;
  --footer-bg:   #2a2118;
  --footer-fg:   #f4ecd8;

  /* fonts — swap for any web font */
  --font-body:    Georgia, "Times New Roman", serif;
  --font-display: "Courier New", Courier, monospace;
  --font-mono:    "Courier New", Courier, monospace;

  /* sizing */
  --content-width: 1100px;
  --sidebar-width: 240px;
  --gap:           1.25rem;
  --radius:        4px;
  --frame-pad:     1.25rem;
  --frame-shadow:  4px 4px 0 var(--frame-border);
}

/* dark-mode example — uncomment to opt in
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1612;
    --fg: #e8dec8;
    --muted: #9a8a78;
    --frame-bg: #2a2118;
    --frame-border: #b94a3a;
  }
}
*/