:root {
  --mm-background: #ffffff;
  --mm-primary: #0ea5e9;
  --mm-secondary: #0284c7;
  --mm-header-bg: #ffffff;
  --mm-header-text: #0c4a6e;
  --mm-footer-bg: #0a2540;
  --mm-footer-text: #e0f2fe;
  --mm-title: #0c4a6e;
  --mm-body: #334155;
  --mm-border: rgba(14, 165, 233, 0.15);
  --mm-header-border: rgba(14, 165, 233, 0.12);
  --mm-footer-border: rgba(14, 165, 233, 0.18);
  --mm-primary-muted: rgba(14, 165, 233, 0.12);
  --mm-primary-container: #0284c7;
  --mm-on-primary-container: #ffffff;
  --mm-surface: #f8fafc;
  --mm-surface-variant: #e2e8f0;
  --mm-on-surface: #0c4a6e;
  --mm-on-surface-variant: #64748b;
  --mm-on-background: #334155;
  --mm-glass-bg: rgba(255, 255, 255, 0.82);
  --mm-glass-elevated: rgba(255, 255, 255, 0.92);
  --mm-frosted-bg: rgba(255, 255, 255, 0.72);
  --mm-frosted-border: rgba(14, 165, 233, 0.22);
  --mm-frosted-shadow: 0 20px 54px rgba(15, 23, 42, 0.12);
  --mm-hero-scrim: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0.14) 30%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 72%
  );
  --mm-hero-panel-bg: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.44) 55%,
    rgba(255, 255, 255, 0.32) 100%
  );
  --mm-hero-panel-border: rgba(255, 255, 255, 0.5);
  --mm-hero-panel-shadow: 0 10px 32px rgba(15, 23, 42, 0.1);
  --mm-header-shadow: rgba(14, 165, 233, 0.08);
  --mm-ring: rgba(14, 165, 233, 0.5);
  --mm-ring-strong: #0ea5e9;
  --mm-hover-glow: 0 10px 30px rgba(14, 165, 233, 0.18);
  --mm-hover-glow-strong: 0 16px 44px rgba(14, 165, 233, 0.26);
  --mm-img-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  --mm-gradient-primary: linear-gradient(135deg, #0ea5e9 0%, #0284c7 52%, #0891b2 100%);
  --mm-gradient-primary-hover: linear-gradient(135deg, #0284c7 0%, #0ea5e9 38%, #0891b2 100%);
  /* Section vertical rhythm (single source — avoid per-component py-* doubling) */
  --mm-section-gap: clamp(2rem, 2.5vw, 3rem);
  --mm-section-pad-y: clamp(1.25rem, 1.75vw, 2rem);
}

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

.bg-header {
  background-color: var(--mm-header-bg) !important;
}

.bg-footer {
  background-color: var(--mm-footer-bg) !important;
}

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

.bg-primary {
  background-color: var(--mm-primary) !important;
}

.bg-primary-container {
  background-color: var(--mm-primary-container) !important;
}

.text-header {
  color: var(--mm-header-text) !important;
}

.text-footer {
  color: var(--mm-footer-text) !important;
}

.text-title {
  color: var(--mm-title) !important;
}

.text-body {
  color: var(--mm-body) !important;
}

.text-primary {
  color: var(--mm-primary) !important;
}

.text-on-surface {
  color: var(--mm-on-surface) !important;
}

.text-on-surface-variant {
  color: var(--mm-on-surface-variant) !important;
}

.text-on-background {
  color: var(--mm-on-background) !important;
}

.text-on-primary-container {
  color: var(--mm-on-primary-container) !important;
}

.text-on-primary {
  color: var(--mm-on-primary) !important;
}

.border-theme {
  border-color: var(--mm-border) !important;
}

.border-header {
  border-color: var(--mm-header-border) !important;
}

.border-footer {
  border-color: var(--mm-footer-border) !important;
}