:root {
  --msi-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  --msi-color-accent: #e63946;
  --msi-color-accent-hover: #d62839;
  --msi-color-accent-active: #c81d2c;
  --msi-color-accent-soft: rgba(230, 57, 70, 0.1);
  --msi-color-accent-rgb: 230, 57, 70;

  --msi-color-brand: #1a3c6e;
  --msi-color-brand-ink: #0f2a4f;
  --msi-color-brand-dark: #0a1628;
  --msi-color-brand-soft: #e8eef8;
  --msi-color-brand-muted: #64748b;
  --msi-color-brand-rgb: 26, 60, 110;
  --msi-color-brand-dark-rgb: 10, 22, 40;

  --msi-color-surface: #f8f9fa;
  --msi-color-surface-strong: #f1f5f9;

  /* Neutral greyscale ramp (admin monochrome theme) */
  --msi-color-neutral-900: #111827;
  --msi-color-neutral-900-rgb: 17, 24, 39;
  --msi-color-neutral-700: #374151;
  --msi-color-neutral-700-rgb: 55, 65, 81;
  --msi-color-neutral-500: #6b7280;
  --msi-color-neutral-300: #d1d5db;
  --msi-color-neutral-100: #f3f4f6;
  --msi-color-border: rgba(15, 23, 42, 0.08);
  --msi-color-text: #1f2937;
  --msi-color-muted: #6c757d;
  --msi-color-white: #ffffff;
  --msi-shadow-accent: 0 8px 30px rgba(var(--msi-color-accent-rgb), 0.35);
  --msi-shadow-brand: 0 10px 24px rgba(var(--msi-color-brand-rgb), 0.25);

  --msi-gradient-hero: linear-gradient(135deg, var(--msi-color-brand-dark) 0%, var(--msi-color-brand) 100%);
  --msi-gradient-brand-accent: linear-gradient(135deg, var(--msi-color-brand), var(--msi-color-accent));
  --msi-gradient-overlay: linear-gradient(135deg, rgba(var(--msi-color-brand-dark-rgb), 0.92), rgba(var(--msi-color-brand-rgb), 0.86));

  --bs-primary: var(--msi-color-accent);
  --bs-primary-rgb: var(--msi-color-accent-rgb);
  --bs-link-color: var(--msi-color-accent);
  --bs-link-color-rgb: var(--msi-color-accent-rgb);
  --bs-link-hover-color: var(--msi-color-accent-hover);
  --bs-link-hover-color-rgb: var(--msi-color-accent-rgb);
  --bs-focus-ring-color: rgba(var(--msi-color-accent-rgb), 0.25);
}

/* Site-wide SSoT: no underlines on links, anywhere (admin or public site).
   Bootstrap's default `a` rule underlines everything; this is the one
   place that should ever say otherwise — don't re-add text-decoration
   overrides in individual templates/pages. */
a {
  text-decoration: none;
}

.text-msi-accent {
  color: var(--msi-color-accent) !important;
}

.text-msi-brand {
  color: var(--msi-color-brand) !important;
}

.bg-msi-accent {
  background: var(--msi-color-accent) !important;
}

.bg-msi-brand {
  background: var(--msi-color-brand) !important;
}

.bg-msi-surface {
  background: var(--msi-color-surface) !important;
}

.msi-pill {
  border-radius: 999px !important;
}

.btn-msi-accent {
  --bs-btn-color: var(--msi-color-white);
  --bs-btn-bg: var(--msi-color-accent);
  --bs-btn-border-color: var(--msi-color-accent);
  --bs-btn-hover-color: var(--msi-color-white);
  --bs-btn-hover-bg: var(--msi-color-accent-hover);
  --bs-btn-hover-border-color: var(--msi-color-accent-hover);
  --bs-btn-active-color: var(--msi-color-white);
  --bs-btn-active-bg: var(--msi-color-accent-active);
  --bs-btn-active-border-color: var(--msi-color-accent-active);
  --bs-btn-focus-shadow-rgb: var(--msi-color-accent-rgb);
}

.btn-msi-brand {
  --bs-btn-color: var(--msi-color-white);
  --bs-btn-bg: var(--msi-color-brand);
  --bs-btn-border-color: var(--msi-color-brand);
  --bs-btn-hover-color: var(--msi-color-white);
  --bs-btn-hover-bg: var(--msi-color-brand-ink);
  --bs-btn-hover-border-color: var(--msi-color-brand-ink);
  --bs-btn-active-color: var(--msi-color-white);
  --bs-btn-active-bg: var(--msi-color-brand-dark);
  --bs-btn-active-border-color: var(--msi-color-brand-dark);
  --bs-btn-focus-shadow-rgb: var(--msi-color-brand-rgb);
}

.badge-msi-accent {
  background: var(--msi-color-accent) !important;
  color: var(--msi-color-white) !important;
}

.badge-msi-brand {
  background: var(--msi-color-brand) !important;
  color: var(--msi-color-white) !important;
}