:root {
  /* Primary/secondary/accent are sourced from the logo (logo.png) — see brand color memory.
     Keep these in lockstep with landing.css's --primary/--secondary/--cyan so inner pages and
     the landing page render the same brand identity, not two different blues. */
  --mb-primary: #0077e3; --mb-primary-hover: #0a5fbd; --mb-primary-active: #084a93; --mb-primary-soft: #e6f1fd;
  --mb-secondary: #7c3aed; --mb-secondary-hover: #6d28d9; --mb-secondary-active: #5b21b6; --mb-secondary-soft: #f3e8ff;
  --mb-accent: #1ee9f4; --mb-accent-soft: #e0fbfe;
  --mb-bg: #f8f9fa; --mb-surface: #ffffff; --mb-surface-muted: #f1f3f4; --mb-border: #dadce0; --mb-border-strong: #bdc1c6;
  --mb-text: #202124; --mb-text-secondary: #3c4043; --mb-text-muted: #5f6368;
  --mb-sidebar: #ffffff; --mb-sidebar-surface: #f8f9fa; --mb-sidebar-text: #202124; --mb-sidebar-muted: #5f6368; --mb-sidebar-hover-bg: #f1f3f4; --mb-sidebar-active-bg: #e6f1fd; --mb-sidebar-active-text: #0077e3;
  --mb-success: #1e8e3e; --mb-success-soft: #e6f4ea; --mb-warning: #f9ab00; --mb-warning-soft: #fef7e0;
  --mb-danger: #d93025; --mb-danger-soft: #fce8e6; --mb-info: #0077e3; --mb-info-soft: #e6f1fd;
  --mb-focus-ring: rgba(0,119,227,.25); --mb-shadow-sm: 0 1px 3px rgba(60,64,67,.08); --mb-shadow-md: 0 4px 12px rgba(60,64,67,.12);
  --mb-radius-sm: 6px; --mb-radius-md: 10px; --mb-radius-lg: 14px;
  --mb-gradient: linear-gradient(135deg, var(--mb-primary) 0%, var(--mb-secondary) 100%);
  --premium-ease: cubic-bezier(.2,.75,.25,1);

  /* Compatibility aliases keep the existing Bootstrap template architecture intact. */
  --brand-blue: var(--mb-primary); --brand-red: var(--mb-danger); --brand-yellow: var(--mb-warning); --brand-green: var(--mb-success); --brand-violet: var(--mb-secondary);
  --brand-primary: var(--mb-primary); --brand-secondary: var(--mb-secondary); --brand-accent: var(--mb-accent); --brand-gradient: var(--mb-gradient);
  --text-heading: var(--mb-text); --text-body: var(--mb-text-secondary); --text-muted: var(--mb-text-muted);
  --surface-page: var(--mb-bg); --surface-card: var(--mb-surface); --surface-soft: var(--mb-surface-muted); --sidebar-surface: var(--mb-sidebar);
  --border-default: var(--mb-border); --border-strong: var(--mb-border-strong); --success: var(--mb-success); --warning: var(--mb-warning); --danger: var(--mb-danger); --info: var(--mb-info);
  --radius-sm: var(--mb-radius-sm); --radius-md: var(--mb-radius-md); --radius-lg: var(--mb-radius-lg); --radius-xl: 18px; --radius-pill: 999px;
  --shadow-sm: var(--mb-shadow-sm); --shadow-md: var(--mb-shadow-md); --shadow-brand: 0 4px 12px rgba(0,119,227,.16);
  --sidebar-width: 252px; --topbar-height: 68px; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem;
  --bs-primary: var(--mb-primary); --bs-primary-rgb: 0,119,227; --bs-link-color: var(--mb-primary); --bs-link-hover-color: var(--mb-primary-hover);
  --bs-body-color: var(--mb-text); --bs-body-bg: var(--mb-bg); --bs-border-color: var(--mb-border);
}