/* =========================================================
   THEME: change the look of the whole site from here.
   - Colours: edit the hex values below (light mode first, then dark mode).
   - Fonts: change the Google Fonts link in index.html, then the names here.
   - Spacing/width: --max is the page width, --radius the card roundness.
   ========================================================= */

:root {
  --paper: #f6f1e7;
  --paper-2: #efe7d8;
  --card: #fffdf8;
  --ink: #0f1b2d;
  --ink-2: #3a4658;
  --muted: #6b7484;
  --rule: #d9cfbd;
  --l1: #d98a1f;   /* amber: justice */
  --l2: #2f8f6b;   /* green: urban */
  --l3: #c8553d;   /* terracotta: infra */
  --accent: var(--l1);
  --deep: #0f1b2d;
  --deep-ink: #f6f1e7;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --max: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 14px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0c1522;
    --paper-2: #111d2e;
    --card: #142236;
    --ink: #ece6da;
    --ink-2: #c3c8d1;
    --muted: #8d97a6;
    --rule: #26354b;
    --l1: #f0a83f;
    --l2: #45b48a;
    --l3: #e2715a;
    --deep: #060c15;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0c1522;
  --paper-2: #111d2e;
  --card: #142236;
  --ink: #ece6da;
  --ink-2: #c3c8d1;
  --muted: #8d97a6;
  --rule: #26354b;
  --l1: #f0a83f;
  --l2: #45b48a;
  --l3: #e2715a;
  --deep: #060c15;
  color-scheme: dark;
}