:root {
  /* COLORS */
  --my-bg: antiquewhite;
  --my-accent1: teal;
  --my-accent2: darkslategray;

  --my-h1-color: black;
  --my-h2-color: var(--my-accent2);
  --my-h3-color: var(--my-accent1);
  --my-h4-color: #111;
  --my-h5-color: var(--my-accent2);
  --my-h6-color: var(--my-accent2);

  --my-text-color1: #333;
  --my-text-color2: #444;

  /* FONTS */
  --my-font-default: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --my-font-courier: "Courier New", Courier, monospace;
}

:root[data-theme="dark"] {
  /* COLORS */
  --my-bg: black;
  --my-accent1: lightseagreen;
  --my-accent2: steelblue;

  --my-h1-color: var(--my-accent2);
  --my-h2-color: var(--my-accent1);
  --my-h3-color: var(--my-accent1);
  --my-h4-color: var(--my-accent2);
  --my-h5-color: darkgrey;
  --my-h6-color: var(--my-text-color1);

  --my-text-color1: #999;
  --my-text-color2: #666;

  /* FONTS (dark mode respects same options) */
  --my-font-default: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --my-font-courier: "Courier New", Courier, monospace;
}

/* --- Courier Font Switch --- */
html[data-font="courier"] p,
html[data-font="courier"] li,
html[data-font="courier"] aside p {
  font-family: var(--my-font-courier);
}