/* Fixed palette. Components use the semantic tokens below. */
:root {
  --palette-white:#fff;
  --palette-blue:#1100ff;
  --palette-charcoal:#202124;
  --palette-danger:#a52b25;
  --palette-danger-light:#ffd4ce;
  --accent:var(--palette-blue);
  --background:var(--palette-white);
  --text:var(--palette-charcoal);
  --danger:var(--palette-danger);
  color-scheme:light;
}

:root[data-theme=blue-dark] {
  --accent:var(--palette-white);
  --background:var(--palette-blue);
  --text:var(--palette-white);
  --danger:var(--palette-danger-light);
  color-scheme:dark;
}

:root[data-theme=mono-light] {
  --accent:var(--palette-charcoal);
}

:root[data-theme=mono-dark] {
  --accent:var(--palette-white);
  --background:var(--palette-charcoal);
  --text:var(--palette-white);
  --danger:var(--palette-danger-light);
  color-scheme:dark;
}

:root {
  --on-accent:var(--background);
  --muted:color-mix(in srgb,var(--text) 72%,var(--background));
  --line:color-mix(in srgb,var(--accent) 55%,var(--background));
  --surface:color-mix(in srgb,var(--accent) 4%,var(--background));
  --surface-hover:color-mix(in srgb,var(--accent) 8%,var(--background));
  --control-track:color-mix(in srgb,var(--accent) 15%,var(--background));
  --accent-hover:color-mix(in srgb,var(--accent) 88%,var(--background));
  --on-accent-muted:color-mix(in srgb,var(--on-accent) 85%,var(--accent));
  --on-accent-line:color-mix(in srgb,var(--on-accent) 28%,var(--accent));
  --on-accent-hover:color-mix(in srgb,var(--accent) 88%,var(--on-accent));
  --on-accent-overlay:color-mix(in srgb,var(--on-accent) 18%,transparent);
  --selection:color-mix(in srgb,var(--accent) 22%,var(--background));
  --shadow:color-mix(in srgb,var(--palette-charcoal) 15%,transparent);
  --backdrop:color-mix(in srgb,var(--palette-charcoal) 48%,transparent);
  /* QR codes stay dark on white for reliable scanning in every mode. */
  --qr-background:var(--palette-white);
  --qr-text:var(--palette-charcoal);
  background:var(--background);
  color:var(--text);
}