/* Interactive pieces wear the site's colour theme (site-side only: library files are never edited).
   Pieces declare their colours as CSS variables on :root (scoped by build.scope_css to .piece-embed) in two
   families of names, with a dark variant under prefers-color-scheme. This sheet re-points those variables at the
   site's own tokens (themes.css) with higher specificity (html .piece-embed.pt beats .piece-embed), so the piece
   follows the theme AND the site's light/dark switch, not the visitor's OS setting.
   --p-* are aliases resolved on <html>, because a piece variable cannot refer to a site variable of the same name.
   build.theme_piece_css (piece pages only) also keys each piece's own dark variant to the site's switch instead of the
   OS, and turns white text hard-coded on an accent background into var(--p-on). Other hard-coded colours (SVG fills,
   plot colours) are not touched; pieces where that looks wrong are listed in own-colours.txt and keep their own
   palette (no .pt class, no rewrite).
   Semantic colours (--good, --hot, --cold, --bad, --ok, --warn) are left as the piece wrote them. */
html{
  --p-bg: var(--obsidian-2);
  --p-card: var(--obsidian-3);
  --p-ink: var(--ink);
  --p-muted: var(--ink-dim);
  --p-line: var(--line);
  --p-acc: var(--gold);
  --p-acc2: var(--gold-soft);
  --p-on: var(--on-accent);
  --p-spark: var(--spark);
}
html .piece-embed.pt{
  /* scheme A: --bg --card --panel --ink --muted --line --accent --accent2 --hi --onacc */
  --bg: var(--p-bg);
  --card: var(--p-card);
  --panel: var(--p-card);
  --ink: var(--p-ink);
  --muted: var(--p-muted);
  --line: var(--p-line);
  --accent: var(--p-acc);
  --accent2: var(--p-acc2);
  --hi: color-mix(in srgb, var(--p-acc) 11%, var(--p-bg));
  --onacc: var(--p-on);
  --on-accent: var(--p-on);
  /* scheme B: --bg-color --card-bg --text-color --secondary-text --border-color --accent-color --accent-light --highlight */
  --bg-color: var(--p-bg);
  --card-bg: var(--p-card);
  --text-color: var(--p-ink);
  --secondary-text: var(--p-muted);
  --border-color: var(--p-line);
  --accent-color: var(--p-acc);
  --accent-light: color-mix(in srgb, var(--p-acc) 11%, var(--p-bg));
  --highlight: var(--p-spark);
}
/* the courses' level colours (Basics / Intermediate) were written for white cards; on the light themes' tinted
   cards they fell under 3:1, so they are darkened a step in light mode (Advanced already passes) */
html[data-theme="light"] .piece-embed.pt{
  --basics-color: #2c6448;
  --inter-color: #7d5515;
}