/* Semantic colour roles are shared by the website, demo and application.
   Existing light colours remain fallbacks in each component stylesheet. */
:root { color-scheme: light; --action: #2449ed; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf2fa;
  --muted: #b0bbce;
  --accent: #9ab2ff;
  --accent-soft: #202e50;
  --action: #3155df;
  --action-hover: #2446c5;
  --line: #39465b;
  --soft: #101722;
  --surface: #192231;
  --surface-subtle: #141d2b;
  --surface-hover: #243047;
  --line-soft: #2e3c51;
  --control-line: #708098;
  --accent-line: #566fa9;
  --accent-tint: #2b3c64;
  --success-bg: #163b30;
  --success-text: #92e0b7;
  --success-line: #3d8665;
  --warning-bg: #3b2e19;
  --warning-text: #f5cd88;
  --warning-line: #97713b;
  --exception-bg: #35294c;
  --exception-text: #d3b9f5;
  --error-bg: #43272a;
  --error-text: #ffb5ae;
  --error-line: #e0877f;
}
html { background: var(--surface, #fff); }
body { color: var(--ink); }
dialog { color: var(--ink); background: var(--surface, #fff); }
input, select, textarea { accent-color: var(--action); }
[data-theme="dark"] :is(input, select, textarea) { border-color: var(--control-line); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
::selection { color: var(--ink); background: var(--accent-soft); }

/* The label stays fixed so aria-pressed communicates the toggle state. */
button.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 0 0 auto; width: auto; min-width: 44px; min-height: 44px;
  margin: 0; padding: 10px 12px; border: 1px solid var(--control-line, var(--line));
  border-radius: 6px; background: var(--surface, #fff); color: var(--ink);
  font: 600 13px/1.4 var(--font); letter-spacing: 0; white-space: nowrap;
  cursor: pointer; text-transform: none; box-shadow: none;
}
button.theme-toggle:hover { background: var(--accent-soft); border-color: var(--accent); }
button.theme-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.theme-toggle svg { width: 18px; height: 18px; flex: none; }
.theme-toggle .theme-sun, [data-theme="dark"] .theme-toggle .theme-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
.theme-controls { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.invite-theme-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0; border: 0; background: transparent; height: auto; }
.navigation-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar { height: auto; min-height: 74px; padding-block: 12px; flex-wrap: wrap; }
@media (max-width: 1250px) { .site-nav { flex-wrap: wrap; gap: 16px; padding-block: 20px; } }
@media (max-width: 700px) {
  .theme-toggle .theme-label { display: none; }
  button.theme-toggle { width: 44px; height: 44px; padding: 10px; }
  .theme-controls { gap: 12px; }
  .signup-header, .support-header, .access-header, .site-header { flex-wrap: wrap; gap: 12px; }
  .app-header { flex-wrap: wrap; }
  .app-header > .theme-toggle { margin-left: auto; }
  .site-nav { column-gap: 12px; }
  .site-nav .theme-controls { margin-left: auto; }
}
@media print {
  :root[data-theme] { color-scheme: light; --ink: #151a25; --muted: #606674; --accent: #2449ed; --accent-soft: #edf1ff; --line: #dfe3e9; --soft: #f5f6f8; --surface: #fff; --surface-subtle: #f5f6f8; --surface-hover: #edf1ff; --line-soft: #dfe3e9; --control-line: #606674; --accent-line: #cdd5fa; --accent-tint: #edf1ff; --success-bg: #eaf4ed; --success-text: #246444; --warning-bg: #fff2dc; --warning-text: #82520d; --exception-bg: #f1ecfa; --exception-text: #604591; --error-bg: #fff4ed; --error-text: #812a24; }
  .theme-toggle { display: none !important; }
}