/* The site's typeface, served from here (Latin set) so the first paint doesn't wait on another server. */
@font-face { font-family: 'Bricolage Grotesque'; src: url(fonts/bricolage.woff2) format('woff2'); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
/* The site's colours, once for every page: mint paper, ink, one green. Light is the default; theme.js sets data-theme="dark". */
:root {
  /* Space between the content and the window edge on each side: 20px on a phone, growing to 64px on wide screens. */
  --gutter: clamp(20px, 4vw, 64px);
  color-scheme: light;
  --void: #E6F8EC;      /* page */
  --panel: #FBFEFC;     /* cards */
  --panel-hi: #FBFEFC;  /* the highlighted price card */
  --inset: #D6F2E0;     /* code and input boxes */
  --line: #BFDCCB;      /* hairlines */
  --paper: #0E2A1D;     /* text */
  --body: #1E3A2C;      /* long-form text on the legal pages */
  --mist: #2E4A3C;      /* secondary text */
  --mint: #0B6E42;      /* you, and what MuteNote writes (text) */
  --sky: #1d5fd6;       /* everyone else on the call (text) */
  --amber: #8a4a00;     /* muted, left out */
  --violet: #6d4fd6;
  --mint-fill: #17B36B; /* bright fills, always with --on-accent text */
  --sky-fill: #6aa9ff;
  --on-accent: #0E2A1D;
  --save: #17B36B;      /* "save" label on the selected (dark) billing pill */
  --card: #FBFEFCcc;
  --nav-bg: linear-gradient(#E6F8ECe6, #E6F8ECb3);
  --btn: #CDF2DB;
  --haze1: #17B36B1a; --haze2: #17B36B12; --haze3: #17B36B14;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --void: #0B1F16;
  --panel: #143225;
  --panel-hi: #163A2A;
  --inset: #0F2A1C;
  --line: #2A4A3A;
  --paper: #E6F8EC;
  --body: #CFE8D8;
  --mist: #9FC4B0;
  --mint: #2BD682;
  --sky: #6aa9ff;
  --amber: #ffb86b;
  --violet: #b9a6ff;
  --mint-fill: #2BD682;
  --sky-fill: #6aa9ff;
  --on-accent: #0B1F16;
  --save: #0B6E42;
  --card: linear-gradient(180deg, #14322599, #0B1F16cc);
  --nav-bg: linear-gradient(#0B1F16cc, #0B1F1688);
  --btn: #1C5A3C;
  --haze1: #17B36B33; --haze2: #17B36B22; --haze3: #17B36B2a;
}
body { background: var(--void); color: var(--paper); font-family: 'Bricolage Grotesque', system-ui, sans-serif; }

/* 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; }