/* Canonical --kl-* design tokens.
 *
 * Every page outside the app shell used to declare its own subset of these in a local
 * :root, and each one missed a different handful. An undefined custom property is invalid
 * at computed-value time, so the declaration that uses it falls back to the property's
 * INITIAL value — not to anything sensible. On /pricing/ that made
 * `.plan-cta.primary { background: var(--kl-ink); color: var(--kl-bg); }` compute to
 * #0A0A0C on transparent: black text on the black page. The Get Starter / Get Pro / Get
 * Scale buttons were invisible, so the pricing page could not be used to subscribe at all.
 * It fails silently and only shows up in rendered pixels, which is why it survived.
 *
 * Values are copied from includes/app_sidebar.html, which is the app-wide source. Pages
 * link this BEFORE their own <style>, so any page-local :root still wins — this only fills
 * the gaps. Keep the two in step; app_sidebar.html remains the origin.
 */
:root {
  /* Ground + raised surfaces */
  --kl-bg: #0A0A0C;
  --kl-surface: #121316;
  --kl-surface-2: #17181C;
  --kl-overlay: #23252A;
  --kl-hover: #1E2024;

  /* Ink ramp */
  --kl-ink: #F7F7F8;
  --kl-ink-2: #C9CACF;
  --kl-mid: #C9CACF;
  --kl-mut: #97999F;
  --kl-faint: #7D7F86;
  --kl-ui: #F2F2F4;

  /* Hairlines */
  --kl-line: rgba(255,255,255,.08);
  --kl-line-strong: rgba(255,255,255,.15);

  /* VERDICT hues — a bare numeral, a signed string or a direction glyph only.
     Never an identity colour, never a lane. */
  --kl-good: #1FD98A;
  --kl-bad: #F04438;
}