/* ── Color tokens (light / dark) ─────────────────────────── */
:root {
  --bg: #fff;
  --bg-grid: #e8e4e0;
  --color-teal: #024454;
  --color-red: #d84d50;
  --color-beige: #e4d0b9;
  --color-tan: #c19280;
  --color-blue: #5c82a7;
  --color-sage: #6f8a81;
  --color-peach: #fdc296;
  --color-gray: #606060;
  --color-orange: #ffb55c;
  --color-darkgray: #231f20;
  --color-cream: #fcf8f5;
  --card-bg: rgba(255, 255, 255, 0.5);

  --font-serif: "ER", "ER-fallback", Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1816;
    --bg-grid: #252320;
    --color-teal: #4a9bae;
    --color-red: #e87b7d;
    --color-beige: #8a7566;
    --color-tan: #9a7768;
    --color-blue: #7a9dbd;
    --color-sage: #8ba89d;
    --color-peach: #c9956d;
    --color-gray: #a0a0a0;
    --color-orange: #d9a066;
    --color-darkgray: #e8e4e0;
    --color-cream: #2a2624;
    --card-bg: rgba(26, 24, 22, 0.92);
  }
}

/* ── Fonts ───────────────────────────────────────────────── */
@font-face {
  font-family: "ER";
  src: url("/css/er-bi.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ER-fallback";
  src: local("Georgia");
  size-adjust: 98%;
  ascent-override: 90%;
  descent-override: 20%;
}

/* ── Base ────────────────────────────────────────────────── */
html {
  width: 100%;
  padding: 0;
}
body {
  margin: 0;
  text-align: center;
  color: var(--color-darkgray);
  font:
    400 100% Avenir,
    Helvetica,
    "Arial Unicode MS",
    Arial,
    sans-serif;
  text-rendering: optimizeLegibility;
}

/* ── Links ───────────────────────────────────────────────── */
a:link,
a:visited {
  text-decoration: none;
  color: var(--color-blue);
}
a:hover {
  background: transparent;
  text-decoration: underline;
}
a:active {
  font-weight: bold;
  color: #99ff00;
  background: transparent;
}