/* The site's colours and type, shared by every page. Colour follows the
   chain throughout: Litecoin blue (#345D9D, its brand colour) is Litecoin,
   teal is LTCVM, violet is planned work, amber is waiting. Light is the default; data-theme="dark" forces dark, and
   data-theme="system" follows the viewer's system setting. */

:root {
  --bg: #f2f4f1;
  --surface: #ffffff;
  --surface-sunk: #eaeee9;
  --ink: #16233a;
  --ink-soft: #4a576b;
  --rule: #cdd5cf;

  --coin: #345d9d;          /* Litecoin */
  --coin-ink: #2b4f87;      /* Litecoin, as text */
  --coin-wash: #e3eaf5;
  --vm: #1d6f6a;            /* LTCVM */
  --vm-ink: #1d6f6a;
  --vm-wash: #d9ece9;
  --plan: #5b5f86;          /* planned work */
  --plan-wash: #e4e5f1;

  --band: #345d9d;
  --band-ink: #ffffff;
  --error: #b3261e;
  --ok: #1d6f6a;
  --live: #1e7b34;          /* the connection light */
  --wait: #c77c02;          /* the connection light, while it waits */

  /* The peg panel stays dark in both themes. */
  --panel: #16233a;
  --panel-ink: #f2f4f1;
  --panel-soft: #c3ccd8;
  --panel-track: rgba(242, 244, 241, 0.13);
  --gauge-ltc: #6f9be0;
  --gauge-vm: #3fa39a;
  --gauge-ltc-ink: #a9c4ee;
  --gauge-vm-ink: #86d6cd;
  --panel-bad: #ff9b92;

  --btn: #16233a;
  --btn-ink: #f2f4f1;
  --focus: #16233a;
  --control-border: #7c8a86;

  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* A major-third scale from 16px. */
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg: #0d1524;
    --surface: #15213a;
    --surface-sunk: #0f192d;
    --ink: #e7ecf2;
    --ink-soft: #a3afc0;
    --rule: #2a3a57;
    --coin: #7ea6e8;
    --coin-ink: #a9c4ee;
    --coin-wash: rgba(126, 166, 232, 0.14);
    --vm: #4fb3a9;
    --vm-ink: #7fd0c7;
    --vm-wash: rgba(79, 179, 169, 0.13);
    --plan: #b7badf;
    --plan-wash: rgba(150, 155, 210, 0.14);
    --error: #ff9b92;
    --ok: #7fd0c7;
    --live: #6fd08c;
    --wait: #f2b33d;
    --band: #7ea6e8;
    --band-ink: #0d1524;
    --panel: #1c2c4b;
    --btn: #e7ecf2;
    --btn-ink: #0d1524;
    --focus: #7ea6e8;
    --control-border: #5a6d8f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1524;
  --surface: #15213a;
  --surface-sunk: #0f192d;
  --ink: #e7ecf2;
  --ink-soft: #a3afc0;
  --rule: #2a3a57;
  --coin: #7ea6e8;
  --coin-ink: #a9c4ee;
  --coin-wash: rgba(126, 166, 232, 0.14);
  --vm: #4fb3a9;
  --vm-ink: #7fd0c7;
  --vm-wash: rgba(79, 179, 169, 0.13);
  --plan: #b7badf;
  --plan-wash: rgba(150, 155, 210, 0.14);
  --error: #ff9b92;
  --ok: #7fd0c7;
  --live: #6fd08c;
  --wait: #f2b33d;
  --band: #7ea6e8;
  --band-ink: #0d1524;
  --panel: #1c2c4b;
  --btn: #e7ecf2;
  --btn-ink: #0d1524;
  --focus: #7ea6e8;
  --control-border: #5a6d8f;
  color-scheme: dark;
}