/*
  RJW DEMO BRANDING
  Edit only these three colour values before a demo.
  Replace club-badge.png in the same folder to change the badge.
*/
:root {
  --demo-primary: #0D1B2A;
  --demo-secondary: #FFFFFF;
  --demo-accent: #C9A840;

  --demo-primary-dark: color-mix(in srgb, var(--demo-primary), #000 24%);
  --demo-primary-mid: color-mix(in srgb, var(--demo-primary), var(--demo-secondary) 13%);
  --demo-accent-soft: color-mix(in srgb, var(--demo-accent), var(--demo-secondary) 34%);

  --navy: var(--demo-primary);
  --navy2: var(--demo-primary-dark);
  --navy3: var(--demo-primary-mid);
  --gold: var(--demo-accent);
  --gold2: var(--demo-accent-soft);
  --text: var(--demo-primary);
}

#sidebar,
.qp-auth-brand {
  background: var(--demo-primary-dark) !important;
}

.brief-masthead,
.qp-hero {
  background: linear-gradient(135deg, var(--demo-primary-dark), var(--demo-primary)) !important;
}

.qp-button {
  background: var(--demo-primary) !important;
  border-color: var(--demo-primary) !important;
  color: var(--demo-secondary) !important;
}

.qp-button:hover:not(:disabled) {
  background: var(--demo-primary-mid) !important;
}

.qp-button.secondary,
.qp-button.subtle {
  background: var(--demo-secondary) !important;
  color: var(--demo-primary) !important;
  border-color: var(--demo-accent) !important;
}

#nav button.nav-item.active,
.nav-item.active {
  border-left-color: var(--demo-accent) !important;
  box-shadow: inset 3px 0 0 var(--demo-accent) !important;
}

.brief-eyebrow,
.sb-club-sub,
.sb-project-live,
.qp-auth-eyebrow {
  color: var(--demo-accent-soft) !important;
}

.btn-gold,
.sb-user-avatar,
.tl-item.tl-done .tl-dot,
.metric-fill,
.hist-dot {
  background: var(--demo-accent) !important;
}

.status-pill,
.qp-hero-meta span {
  border-color: color-mix(in srgb, var(--demo-secondary), transparent 72%) !important;
}