/* KiwiKode: shared theme for the project pages.
   Matches the home page: near-black ground, faint instrument graticule,
   cyan wordmark, amber accents, IBM Plex throughout. */

:root {
  /* Tells the browser which way round we are, so the surfaces it paints itself
     -- scrollbars, select popups, and the about:blank an iframe shows before it
     has a document -- match the page instead of defaulting to light. */
  color-scheme: dark;

  /* Dark is the default. Light overrides only these values, below. */
  --bg: #07090c;
  --grid: #151b21;
  --panel: #0d1117;
  --side-bg: #0a0e13;
  --line: #1b232b;
  --line-2: #2b353f;
  --ink: #dbe1e8;
  --prose: #aab4bd;
  --prose-dim: #97a3ac;
  --muted: #78868f;
  --dim: #4a555f;
  --dim-2: #3b444d;
  --mark: #86d9ea;
  --mark-hi: #a8e6f4;
  --mark-glow: rgba(134, 217, 234, 0.3);
  --accent: #e0a04a;
  --accent-dim: #6f5333;
  --panel-soft: rgba(13, 17, 23, 0.55);
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow: rgba(0, 0, 0, 0.6);
}

html[data-theme="light"] {
  /* Two declarations on purpose. The plain one is the fallback for
     anything that does not understand `only`; the second wins where it
     is understood, and is what stops a browser converting this page.

     Some embedded browsers -- the Google app's in-app browser on iOS is
     the one we hit -- repaint a light page dark when the phone is in
     Dark Mode. They leave alone any page that says it handles dark
     itself. `light dark` would also buy the exemption, but it hands the
     browser the choice of scheme for the surfaces it paints, so form
     controls and scrollbars would go dark on our light page. `only
     light` claims the exemption without giving that up.

     Dark needs no equivalent: nothing force-lightens, and spelling it
     `only dark` would risk an older browser dropping the declaration
     and painting light scrollbars on our dark default. */
  color-scheme: light;
  color-scheme: only light;
  --bg: #f7f8fa;
  --grid: #e6eaf0;
  --panel: #ffffff;
  --side-bg: #eef1f5;
  --line: #d8dee6;
  --line-2: #b9c3ce;
  --ink: #10181c;
  --prose: #3d4a55;
  --prose-dim: #55636f;
  --muted: #5a6773;
  --dim: #8b98a4;
  --dim-2: #a6b1bc;
  /* Same hue as the icon cyan (#86d9ea), but a step darker so it holds
     on paper. The icon pigment itself washes out on --bg. Kept bright on
     purpose: this is the mark, and reading as the logo matters more here
     than the 2.96:1 it measures against --bg. Anything that has to be read
     rather than recognised should not be asking --mark for its colour.
     The amber is the counterpart pigment, driven further down (4.8:1)
     because --accent does carry headings and the ECG trace. */
  --mark: #0d9ec0;
  --mark-hi: #0b87a3;
  --mark-glow: rgba(13, 158, 192, 0.22);
  --accent: #9c6011;
  --accent-dim: #cfa877;
  --panel-soft: #ffffff;
  --scrim: rgba(0, 0, 0, 0.35);
  --shadow: rgba(0, 0, 0, 0.18);
}