/* ==========================================================================
   THE MADLANGA COMMISSION — palette
   "Blueprint, restrained": ink, brass and slate. One set of names, two sets of
   values. Every page links this file first and then styles itself entirely from
   these variables, so a theme is a change of values here and nothing else.

   HOW THE THEME IS CHOSEN
     The <html> element carries data-theme="light" or data-theme="dark". A tiny
     inline script in each page's <head> sets it before the first paint, from the
     reader's saved choice or, failing that, from what their device already says.
     Nothing here depends on the OS media query at paint time, because a page
     that waits for it flashes the wrong colours first.

   CONTRAST
     The light values are deliberately darker than their dark-mode counterparts:
     the brass that reads well on #0e0f12 is too pale on white, so the accent
     drops to #8a6a1f and each entity colour is taken down until it passes 4.5:1
     against the page background.
   ========================================================================== */

:root,
html[data-theme="dark"] {
  color-scheme: dark;

  /* surfaces */
  --bg: #0e0f12;
  --bg-2: #14161b;
  --bg-deep: #0b0c0f;
  --panel: #171a20;
  --panel-2: #1d2026;
  --border: #2a2d33;
  --border-soft: #212429;
  --border-strong: #3a3e45;
  --panel-deep: #12141a;

  /* text */
  --text: #e8e4db;
  --text-strong: #ece7db;
  --text-dim: #b3ada1;
  --text-faint: #8b867c;
  --text-soft: #f2eee4;

  /* accents */
  --accent: #c9a24b;
  --accent-bright: #e2c684;
  --accent-2: #8fa4b6;
  --accent-2-rgb: 143, 164, 182;
  --brass-rgb: 201, 162, 75;
  --on-accent: #1a1205;

  /* translucent chrome: headers, overlays, tints, shadows */
  --header-bg: rgba(14, 15, 18, 0.94);
  --panel-translucent: rgba(23, 26, 32, 0.94);
  --chrome: rgba(11, 13, 17, 0.72);
  --scrim: rgba(14, 15, 18, 0.96);
  --overlay: rgba(10, 11, 13, 0.93);
  --overlay-soft: rgba(10, 11, 13, 0.72);
  --hover-tint: rgba(255, 255, 255, 0.045);
  --shadow-strong: rgba(0, 0, 0, 0.7);
  --shadow-soft: rgba(0, 0, 0, 0.35);

  /* entity colours, echoed by app.js for the graph */
  --person: #7fa8bd;
  --organization: #a193c4;
  --document: #aab86e;
  --event: #c48aa4;
  --topic: #86b28f;
  --location: #8f8f8c;
  --case: #bf7f66;
  --case-alt: #c97b6b;
  /* People who died. Kept apart from the entity palette on purpose: this is not
     a category of thing, it is a fact about a person. */
  --victim: #e2574c;
}

html[data-theme="light"] {
  color-scheme: light;

  --bg: #fbfaf7;
  --bg-2: #f2efe8;
  --bg-deep: #efece4;
  --panel: #ffffff;
  --panel-2: #f6f4ee;
  --border: #e3ded3;
  --border-soft: #eae5db;
  --border-strong: #cfc8ba;
  --panel-deep: #f7f5f0;

  --text: #1b1a17;
  --text-strong: #141310;
  --text-dim: #55514a;
  --text-faint: #6f6a60;
  --text-soft: #2a2823;

  --accent: #8a6a1f;
  --accent-bright: #6f5416;
  --accent-2: #33607a;
  --accent-2-rgb: 51, 96, 122;
  --brass-rgb: 138, 106, 31;
  --on-accent: #fffdf7;

  --header-bg: rgba(251, 250, 247, 0.94);
  --panel-translucent: rgba(255, 255, 255, 0.94);
  --chrome: rgba(251, 250, 247, 0.72);
  --scrim: rgba(251, 250, 247, 0.96);
  --overlay: rgba(38, 35, 30, 0.42);
  --overlay-soft: rgba(38, 35, 30, 0.3);
  --hover-tint: rgba(20, 18, 14, 0.045);
  --shadow-strong: rgba(28, 25, 20, 0.18);
  --shadow-soft: rgba(28, 25, 20, 0.1);

  /* Darkened until each one passes 4.5:1 on the paper background — the pastels
     that work on ink are far too pale to read on white. */
  --person: #2f6382;
  --organization: #5f4f96;
  --document: #5a6c30;
  --event: #964668;
  --topic: #37704c;
  --location: #63635f;
  --case: #8d4c36;
  --case-alt: #a03f2c;
  --victim: #b3261e;
}

/* Shared type and geometry, independent of theme. */
:root {
  --font: -apple-system, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --radius: 14px;
}

/* ---------------- the theme switch ----------------
   One button, three states, cycling Auto -> Light -> Dark. The icon is chosen
   by CSS from data-theme-mode on <html>, so the button never has to be redrawn
   by script and it shows the right glyph even before theme.js runs. */
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; flex: 0 0 auto;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.theme-btn:hover { color: var(--text); border-color: var(--border-strong); }
.theme-btn svg { display: none; }
html[data-theme-mode="auto"] .theme-btn .ic-auto,
html[data-theme-mode="light"] .theme-btn .ic-light,
html[data-theme-mode="dark"] .theme-btn .ic-dark { display: block; }