/* The site's colours, once for every page. Light is the default; theme.js sets data-theme="dark". */
:root {
  color-scheme: light;
  --void: #f6f7fb;      /* page */
  --panel: #fff;        /* cards */
  --panel-hi: #fff;     /* the highlighted price card */
  --inset: #eceff7;     /* code and input boxes */
  --line: #d9deeb;      /* hairlines */
  --paper: #0b0e1f;     /* text */
  --body: #1f2540;      /* long-form text on the legal pages */
  --mist: #4b5373;      /* secondary text */
  --mint: #047857;      /* you, and what MuteNote writes (text) */
  --sky: #1d5fd6;      /* everyone else on the call (text) */
  --amber: #9a4d00;     /* muted, left out */
  --violet: #6d4fd6;
  --mint-fill: #46f9b8; /* bright fills, always with --on-accent text */
  --sky-fill: #6aa9ff;
  --on-accent: #04050c;
  --save: #46f9b8;      /* "save" label on the selected (dark) billing pill */
  --card: #ffffffcc;
  --nav-bg: linear-gradient(#f6f7fbe6, #f6f7fbb3);
  --btn: #e3e7f2;
  --haze1: #6d4fd61a; --haze2: #1d5fd612; --haze3: #6d4fd614;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --void: #04050c;
  --panel: #0b0e1f;
  --panel-hi: #0d1226;
  --inset: #05070f;
  --line: #1e2446;
  --paper: #eef2ff;
  --body: #d7def0;
  --mist: #a0aacb;
  --mint: #46f9b8;
  --sky: #6aa9ff;
  --amber: #ffb86b;
  --violet: #b9a6ff;
  --mint-fill: #46f9b8;
  --sky-fill: #6aa9ff;
  --on-accent: #04050c;
  --save: #0a7a55;
  --card: linear-gradient(180deg, #11163099, #0a0d1ccc);
  --nav-bg: linear-gradient(#04050ccc, #04050c88);
  --btn: #1c2240;
  --haze1: #3a2a9a55; --haze2: #1f5f8a33; --haze3: #241a5e88;
}
body { background: var(--void); color: var(--paper); }

/* the mark's pale strokes fade on white */
:root:not([data-theme="dark"]) img[src$="logo.svg"] { filter: brightness(.85) saturate(1.4); }

.theme-toggle { flex: none; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--mist); cursor: pointer; display: grid; place-items: center; transition: color .2s, border-color .2s; }
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--paper); border-color: var(--mist); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }