/* Per-era theme overrides. The body carries class era-<id> (set by systems/eras.js).
   Hearth uses the base palette from main.css unchanged.
   WP-010 adds era-bronze; later phases add the rest (see GAME_DESIGN.md §9). */

body.era-hearth {
  /* base theme = hearth */
}

/* Bronze: parchment cools toward early ink. The paper loses a little of its warmth, the
   text gets darker and flatter (things are being written down now rather than remembered),
   and the accent moves from firelight brown to a weathered bronze-green. Modest on purpose —
   the era ladder has four more shifts after this one. (WP-010) */
body.era-bronze {
  --bg: #f2f0e7;
  --fg: #1e1c19;
  --muted: #68665d;
  --accent: #5d6b4a;
  --panel: #e8e5d8;
  --border: #cdc8b6;
  --good: #3a6f47;
  --bad: #9b3f31;
  --warn: #7f6220;
}

body.era-bronze #game-title { letter-spacing: 2px; }
body.era-bronze .log-entry .ts { font-style: normal; letter-spacing: 0.3px; }

/* Iron: the paper cools further still, ink goes properly black (roads, coin, a settled
   alphabet), and the accent drops out of green-brown into a dull grey-green — bronze with the
   warmth worked out of it. WCAG contrast checked against both --bg and --panel (see PROGRESS.md
   for the numbers this packet recorded); every pair here is at or above the ratio the shipped
   Hearth/Bronze themes already carry. (WP-018) */
body.era-iron {
  --bg: #ebe9e0;
  --fg: #131311;
  --muted: #636057;
  --accent: #54615a;
  --panel: #e0ddd0;
  --border: #c7c2b0;
  --good: #356b44;
  --bad: #8e392c;
  --warn: #795c1b;
}
body.era-iron #game-title { letter-spacing: 2.5px; }
body.era-iron .log-entry .ts { color: var(--accent); }

/* Medieval: vellum warmth returns after Iron's cooler ink, the accent turns rubric red (the
   illuminator's red ink, not blood), and headings sit a touch heavier — a manuscript, not a
   ledger. (WP-018) */
body.era-medieval {
  --bg: #f1e6cf;
  --fg: #241c14;
  --muted: #6a5e47;
  --accent: #8a2a24;
  --panel: #e7d8ba;
  --border: #d9c6a0;
  --good: #396939;
  --bad: #7a2e1f;
  --warn: #82551a;
}
body.era-medieval #game-title,
body.era-medieval #tab-people h3,
body.era-medieval #tab-research h3,
body.era-medieval .culture-tier-heading { font-weight: bold; }
body.era-medieval .building-btn.wonder { border-width: 2px; }

/* Renaissance: the whitest paper of the run, finer type, and the accent turns ink blue —
   printing has caught up with thought. (WP-018) */
body.era-renaissance {
  --bg: #faf8f3;
  --fg: #201f22;
  --muted: #6b6878;
  --accent: #2c3f66;
  --panel: #f0eee6;
  --border: #ded9cb;
  --good: #2f6b46;
  --bad: #9c3327;
  --warn: #8a6112;
}
body.era-renaissance { font-size: 13px; }
body.era-renaissance #game-title { letter-spacing: 0.5px; font-style: normal; }

/* Industrial: paper greys under soot, the accent turns brass, and borders read harder —
   machinery, not craft. The warning colour is pushed toward a genuine, saturated red-orange
   rather than the earlier eras' ochre, so it reads as an alarm rather than a caution note.
   (WP-018) */
body.era-industrial {
  --bg: #d9d5cd;
  --fg: #17140f;
  --muted: #555149;
  --accent: #684e1e;
  --panel: #cac5ba;
  --border: #b7b0a0;
  --good: #275d36;
  --bad: #8a2b1e;
  --warn: #8d350e;
}
body.era-industrial .game-btn,
body.era-industrial .building-btn,
body.era-industrial #sidebar,
body.era-industrial #log-panel { border-width: 2px; }
body.era-industrial .log-entry.warning,
body.era-industrial .log-entry.warning .log-text { font-weight: bold; }

/* ---- Path palettes (WP-034, from Jason's Claude Design "Ember Icons II") --------------------
   Applied by js/systems/eras.js.applyTheme() the moment a path is committed: body carries
   path-<id> ALONGSIDE its era class, and these blocks sit after the era blocks on purpose —
   equal specificity, later wins, so a committed run wears its path over Industrial soot.
   Every ratio below was measured (WCAG relative luminance) against both --bg and --panel and
   clears AA 4.5:1 for body text; --good/--bad/--warn separate by hue at similar luminance,
   the same trio logic every era palette uses. Design names: The Sky / The Wire / The Ruins. */

/* The Sky: soot thinning into high, cold air; the accent a pale dawn blue. */
body.path-space {
  --bg: #e9edf2;
  --fg: #1e252c;      /* 13.17 / 11.96 */
  --muted: #555f6a;   /*  5.53 /  5.02 */
  --accent: #35608a;  /*  5.60 /  5.08 */
  --panel: #dce3ea;
  --border: #bcc7d2;
  --good: #2f6b45;    /*  5.40 /  4.90 */
  --bad: #9c3326;     /*  6.13 /  5.56 */
  --warn: #75581a;    /*  5.64 /  5.12 */
  --ember: #b8622e;
}
/* Flourish: the ledger's letters stand a little further apart, as the air does. */
body.path-space #game-title { letter-spacing: 3px; }

/* The Wire: a late office with one lamp on — the darkest of the nine themes, but still
   paper: warm-grey ink, and the teal appears only on the accent. */
body.path-cyberpunk {
  --bg: #1c1e21;
  --fg: #e4e1da;      /* 12.79 / 11.34 */
  --muted: #a29e94;   /*  6.25 /  5.54 */
  --accent: #3fbfae;  /*  7.38 /  6.54 */
  --panel: #25282c;
  --border: #3a4046;
  --good: #71bd7d;    /*  7.38 /  6.54 */
  --bad: #e0876e;     /*  6.25 /  5.54 */
  --warn: #cfae57;    /*  7.83 /  6.94 */
  --ember: #e08a4a;
}
/* Flourish: timestamps take the lamp's colour. */
body.path-cyberpunk .log-entry .ts { color: var(--accent); }

/* The Ruins: parchment gone to moss and lichen; a patient green does the work the brown
   used to do. The design's accent (#3f6b3a) sat six hue degrees off --good, so surplus
   numbers vanished into chrome; shifted olive (#46662a, hue ~90 vs ~131) at integration,
   re-measured, still AA on both surfaces. */
body.path-collapse {
  --bg: #eceadb;
  --fg: #252a20;      /* 12.13 / 10.97 */
  --muted: #565d4c;   /*  5.66 /  5.12 */
  --accent: #46662a;  /*  5.43 /  4.91 (design #3f6b3a: 5.14 / 4.65) */
  --panel: #e0e0cb;
  --border: #c3c7aa;
  --good: #2f6b3a;    /*  5.28 /  4.78 */
  --bad: #9a3b2c;     /*  5.72 /  5.17 */
  --warn: #75601a;    /*  5.04 /  4.56 */
  --ember: #b96428;
}
/* Flourish: rules soften to dotted, as though drawn with a worn nib. */
body.path-collapse #tab-people h3,
body.path-collapse #tab-research h3,
body.path-collapse #tab-path h3,
body.path-collapse .culture-tier-heading { border-bottom-style: dotted; }
body.path-collapse .finale-line { border-bottom-style: dotted; }

/* ---- Dark mode (WP-041) ---------------------------------------------------------------------
   body.dark, beside the era/path class (js/systems/eras.js owns both). One shared dark paper
   (a warm near-black, not a terminal), with each era's and path's own inks lightened until
   they clear WCAG AA 4.5:1 against BOTH dark surfaces — every value below was computed and
   measured, hue kept. The Wire's palette was designed dark and is restored verbatim under
   dark mode (the two-class selector outweighs the base). These blocks sit last in the file
   on purpose: dark wins over everything above at equal specificity. */

body.dark {
  --bg: #191715;
  --fg: #e7e1d4;      /* 13.72 / 12.59 */
  --muted: #928779;   /*  4.98 /  4.57 */
  --panel: #221f1b;
  --border: #3b3529;
  --accent: #ad8044;  /* hearth's inks, lit: 4.65+ on both surfaces (per-era below) */
  --good: #4c994c;
  --bad: #d06a5a;
  --warn: #ab8126;
  --ember: #de8843;
}
body.dark.era-bronze      { --accent: #7b8e62; --good: #4f9761; --bad: #cc6d5e; --warn: #aa832b; }
body.dark.era-iron        { --accent: #7a8c83; --good: #4b9760; --bad: #cd6c5d; --warn: #ab8226; }
body.dark.era-medieval    { --accent: #d56760; --good: #529752; --bad: #d46954; --warn: #bb7b25; }
body.dark.era-renaissance { --accent: #6d88c0; --good: #439964; --bad: #d6675b; --warn: #b37e17; }
body.dark.era-industrial  { --accent: #ad8232; --good: #419a59; --bad: #da6353; --warn: #e85a1b; }
body.dark.path-space      { --accent: #598dbf; --good: #439963; --bad: #d76759; --warn: #ab8126;
                            --bg: #191715; --fg: #e7e1d4; --muted: #928779;
                            --panel: #221f1b; --border: #3b3529; --ember: #de8843; }
body.dark.path-collapse   { --accent: #66953d; --good: #439953; --bad: #d06a5a; --warn: #a38624;
                            --bg: #191715; --fg: #e7e1d4; --muted: #928779;
                            --panel: #221f1b; --border: #3b3529; --ember: #de8843; }
/* The Wire is already the dark theme; under dark mode it stays exactly itself. */
body.dark.path-cyberpunk {
  --bg: #1c1e21; --fg: #e4e1da; --muted: #a29e94; --accent: #3fbfae;
  --panel: #25282c; --border: #3a4046; --good: #71bd7d; --bad: #e0876e;
  --warn: #cfae57; --ember: #e08a4a;
}