:root {
  /* SAME COLOUR FAMILY AS THE STAFF PANELS AND LOGIN PAGES (assets/shared/css/staff-theme-tokens.css) */
  --qm-brand: var(--ak-primary, #2563eb);
  --qm-brand-hover: var(--ak-primary-hover, #1d4ed8);
  --qm-brand-ink: #FFFFFF;
  --qm-brand-soft: rgba(37, 99, 235, 0.10);
  --qm-brand-tint: #E8EFFD;

  --qm-page: #F5F7FB;
  --qm-hero: #E9F0FC;

  /* dark panels (owner call-to-action, badges): deep navy of the header blue */
  --qm-shell: #0B2A5E;
  --qm-shell-2: #12366F;
  --qm-shell-ink: #F1F5FB;
  --qm-shell-ink-muted: #B9C7DE;
  --qm-shell-line: rgba(241, 245, 251, 0.18);

  /* header, footer, menu drawer: same colour as the staff panels and login pages */
  --qm-chrome: var(--ak-header-bg, #004aad);
  --qm-chrome-2: rgba(255, 255, 255, 0.12);
  --qm-chrome-ink: var(--ak-header-ink, #ffffff);
  --qm-chrome-ink-muted: rgba(255, 255, 255, 0.82);
  --qm-chrome-line: var(--ak-header-line, rgba(255, 255, 255, 0.22));

  --qm-ink: var(--ak-ink, #374151);
  --qm-ink-strong: var(--ak-ink-strong, #111827);
  --qm-ink-muted: var(--ak-ink-muted, #4B5563);
  --qm-ink-subtle: var(--ak-ink-subtle, #6B7280);

  --qm-surface: #FFFFFF;
  --qm-surface-2: #F8FAFC;
  --qm-surface-3: #EEF2F7;
  --qm-border: var(--ak-border, #E5E7EB);
  --qm-border-strong: var(--ak-border-strong, #CBD5E1);

  --qm-success: #2E7D4F;
  --qm-success-soft: rgba(46, 125, 79, 0.12);
  --qm-warning: #9A6400;
  --qm-warning-soft: rgba(154, 100, 0, 0.14);
  --qm-danger: #C0392B;
  --qm-danger-soft: rgba(192, 57, 43, 0.12);
  --qm-info: #1F62A8;
  --qm-info-soft: rgba(31, 98, 168, 0.10);
}