/* Q Market demo palette. Theme selection runs before the first paint. */
.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }
:root {
  color-scheme: dark;
  --dl-bg: #0a0a0b;
  --dl-card: #121214;
  --dl-inset: #18181b;
  --dl-line: rgba(255, 255, 255, 0.14);
  --dl-ink: #f4f4f2;
  --dl-muted: #b4b6bd;
  --dl-accent: #6798ff;
  --dl-selected: #242428;
}
/* Light on Mobbin's white, measured in their app: the page #ffffff, ink #141414,
   secondary text #707070 and #878787, surfaces an 8% grey wash on white. Accents stay neutral. */
:root[data-theme="light"] {
  color-scheme: light;
  --dl-bg: #ffffff;
  --dl-card: #f7f7f7;
  --dl-inset: #f0f0f0;
  --dl-line: rgba(20, 20, 20, 0.18);
  --dl-ink: #141414;
  --dl-muted: #707070;
  --dl-accent: #41463b;
  --dl-selected: #f0f0f0;
  --color-bg: #ffffff;
  --color-bg2: #f7f7f7;
  --color-surface: #f7f7f7;
  --color-surface2: #f0f0f0;
  --color-hair: rgba(20, 20, 20, 0.06);
  --color-line: rgba(20, 20, 20, 0.10);
  --color-line2: #b0b0b0;
  --color-cream: #141414;
  --color-text: #141414;
  --color-dim: #707070;
  --color-faint: #757575;
  --color-green: #41463b;
  --color-green-hover: #292e24;
  --color-green-deep: #41463b;
  --color-amber: #b54b0a;
  --color-gold: #141414;
  --color-red: #b43d3d;
  --color-on-cream: #ffffff;
  --color-on-green: #ffffff;
  --color-green-5: rgb(65 70 59 / 0.05);
  --color-green-6: rgb(65 70 59 / 0.06);
  --color-green-9: rgb(65 70 59 / 0.09);
  --color-green-28: rgb(65 70 59 / 0.28);
  --color-green-32: rgb(65 70 59 / 0.32);
}
body { background: var(--dl-bg); }
.qm-theme-toggle {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
  width: 54px; height: 44px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--dl-muted); cursor: pointer;
}
.qm-theme-toggle:focus-visible { outline: 2px solid var(--dl-accent); outline-offset: 2px; }
.qm-theme-track {
  position: relative; display: flex; width: 54px; height: 28px; padding: 2px;
  border: 1px solid var(--dl-line); border-radius: 8px; background: transparent;
}
.qm-theme-toggle:hover .qm-theme-track { border-color: var(--dl-muted); }
.qm-theme-thumb {
  position: absolute; top: 2px; left: 2px; width: 24px; height: 22px;
  border-radius: 5px; background: var(--dl-selected);
}
.qm-theme-icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 22px;
}
.qm-theme-icon.is-active { color: var(--dl-ink); }