/* Shared colour, type and surface tokens. */
    :root,
    [data-theme="light"] {
      color-scheme: light;
      --app-bg: #f3f6f8;
      --app-surface: #ffffff;
      --app-surface-soft: #f7f9fb;
      --app-border: #dce5eb;
      --app-text: #203746;
      --app-muted: #637785;
      --app-primary: #177c80;
      --app-primary-hover: #12686c;
      --app-primary-dark: #126b70;
      --app-accent: #507e9e;
      --app-warning: #a67b23;
      --app-danger: #b64e5d;
      --app-secondary: #647b8a;
      --app-navbar: #173849;
      --app-shadow: 0 4px 18px rgba(29, 57, 73, .045);
      --app-focus: rgba(23, 124, 128, .18);
      --app-filter-bg: var(--app-surface-soft);
      --app-chip-bg: #edf3f6;
      --app-chip-text: #506978;
      --app-icon-bg: #e9f5f3;
      --app-icon-border: #cce7e2;
      --app-link: #126b70;
      --op-register: #26785c;
      --op-register-bg: #edf7f1;
      --op-register-border: #cfe7d7;
      --op-register-text: #32664a;
      --op-transfer: #5883a8;
      --op-transfer-bg: #edf4fb;
      --op-transfer-border: #d2e0ee;
      --op-transfer-text: #365f83;
      --op-deregister: #ae4759;
      --op-deregister-bg: #f8eeee;
      --op-deregister-border: #ebd0d0;
      --op-deregister-text: #7a3f3f;
      --op-update: #b9a369;
      --op-update-bg: #f8f3e5;
      --op-update-border: #e9ddbd;
      --op-update-text: #705f2f;
      --op-neutral: #617584;
      --op-neutral-bg: #eef1ef;
      --op-neutral-border: #d9dfdc;
      --op-neutral-text: #4b5650;
    }
    [data-theme="dark"] {
      color-scheme: dark;
      --app-bg: #101e28;
      --app-surface: #1a2c39;
      --app-surface-soft: #203440;
      --app-border: #344c5a;
      --app-text: #e7f0f5;
      --app-muted: #a2b5c1;
      --app-primary: #237e83;
      --app-primary-hover: #1a6f74;
      --app-primary-dark: #88d8ce;
      --app-accent: #8eb7d0;
      --app-warning: #d3b365;
      --app-danger: #e5a0aa;
      --app-secondary: #a2b5c1;
      --app-navbar: #142f3e;
      --app-shadow: 0 4px 20px rgba(0, 0, 0, .12);
      --app-focus: rgba(104, 199, 190, .22);
      --app-filter-bg: var(--app-surface-soft);
      --app-chip-bg: #263e4c;
      --app-chip-text: #c5d9e3;
      --app-icon-bg: #203f45;
      --app-icon-border: #376168;
      --app-link: #88d8ce;
      --op-register: #26785c;
      --op-register-bg: #233a34;
      --op-register-border: #45695a;
      --op-register-text: #bfe8cf;
      --op-transfer: #81aeca;
      --op-transfer-bg: #213c50;
      --op-transfer-border: #3b5c76;
      --op-transfer-text: #bbd7eb;
      --op-deregister: #ae4759;
      --op-deregister-bg: #3d2b35;
      --op-deregister-border: #6c4a57;
      --op-deregister-text: #efc4ca;
      --op-update: #d2b76f;
      --op-update-bg: #3a3123;
      --op-update-border: #6c5a35;
      --op-update-text: #ecd89b;
      --op-neutral: #617584;
      --op-neutral-bg: #2a3441;
      --op-neutral-border: #47566a;
      --op-neutral-text: #d3dbe6;
    }

/* One source for every module, including Bootstrap components. */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --app-radius: 14px;
  --app-radius-sm: 9px;
  --app-title-size: clamp(1.4rem, 1.18rem + .65vw, 1.75rem);
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-color: var(--app-text);
  --bs-body-color-rgb: 32, 55, 70;
  --bs-body-bg: var(--app-bg);
  --bs-secondary-color: var(--app-muted);
  --bs-tertiary-color: var(--app-muted);
  --bs-secondary-bg: var(--app-surface-soft);
  --bs-tertiary-bg: var(--app-surface-soft);
  --bs-emphasis-color: var(--app-text);
  --bs-heading-color: var(--app-text);
  --bs-border-color: var(--app-border);
  --bs-border-color-translucent: var(--app-border);
  --bs-border-radius: var(--app-radius-sm);
  --bs-border-radius-lg: var(--app-radius);
  --bs-link-color: var(--app-link);
  --bs-link-hover-color: var(--app-primary-dark);
  --bs-link-color-rgb: 18, 107, 112;
  --bs-link-hover-color-rgb: 18, 107, 112;
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: 23, 124, 128;
  --bs-primary-text-emphasis: var(--app-primary-dark);
  --bs-primary-bg-subtle: var(--app-icon-bg);
  --bs-primary-border-subtle: var(--app-icon-border);
  --bs-success-text-emphasis: var(--op-register-text);
  --bs-success-bg-subtle: var(--op-register-bg);
  --bs-success-border-subtle: var(--op-register-border);
  --bs-info-text-emphasis: var(--op-transfer-text);
  --bs-info-bg-subtle: var(--op-transfer-bg);
  --bs-info-border-subtle: var(--op-transfer-border);
  --bs-warning-text-emphasis: var(--op-update-text);
  --bs-warning-bg-subtle: var(--op-update-bg);
  --bs-warning-border-subtle: var(--op-update-border);
  --bs-danger-text-emphasis: var(--op-deregister-text);
  --bs-danger-bg-subtle: var(--op-deregister-bg);
  --bs-danger-border-subtle: var(--op-deregister-border);
  --bs-secondary-text-emphasis: var(--op-neutral-text);
  --bs-secondary-bg-subtle: var(--op-neutral-bg);
  --bs-secondary-border-subtle: var(--op-neutral-border);
}
[data-theme="dark"] {
  --bs-body-color-rgb: 231, 240, 245;
  --bs-link-color-rgb: 136, 216, 206;
  --bs-link-hover-color-rgb: 164, 232, 222;
  --bs-primary-rgb: 35, 126, 131;
}