:root {

  /* =======================
     Fonts
  ======================= */
  /* Font family */
  --mpx-ff-a: "Dm Sans", sans-serif;

  /* Headings */
  /* Heading 1 — Bold */
  --mpx-fs-h1: clamp(2.5rem, 1.92074rem + 2.439vw, 3.75rem);
  --mpx-lh-h1: clamp(2.8125rem, 2.23324rem + 2.439vw, 4.0625rem);

  /* Heading 2 — Bold */
  --mpx-fs-h2: clamp(2rem, 1.53664rem + 1.951vw, 3rem);
  --mpx-lh-h2: clamp(2.3125rem, 1.84914rem + 1.951vw, 3.3125rem);

  /* Heading 3 — Bold */
  --mpx-fs-h3: clamp(1.75rem, 1.40254rem + 1.463vw, 2.5rem);
  --mpx-lh-h3: clamp(2.0625rem, 1.71504rem + 1.463vw, 2.8125rem);

  /* Heading 4 — Semi-Bold */
  --mpx-fs-h4: clamp(1.5rem, 1.3841rem + 0.488vw, 1.75rem);
  --mpx-lh-h4: clamp(1.8125rem, 1.6966rem + 0.488vw, 2.0625rem);

  /* Heading 5 — Semi-Bold */
  --mpx-fs-h5: clamp(1.25rem, 1.1341rem + 0.488vw, 1.5rem);
  --mpx-lh-h5: clamp(1.5625rem, 1.4466rem + 0.488vw, 1.8125rem);

  /* Headline — Semi-Bold (semantic role, not tied to h6) */
  --mpx-fs-headline: clamp(1.125rem, 1.06705rem + 0.244vw, 1.25rem);
  --mpx-lh-headline: clamp(1.4375rem, 1.37955rem + 0.244vw, 1.5625rem);

  /* Body Text — Regular */
  --mpx-fs-body: clamp(1rem, 1rem + 0vw, 1rem);
  --mpx-lh-body: clamp(1.4375rem, 1.37955rem + 0.244vw, 1.5625rem);

  /* Sub Text — Regular */
  --mpx-fs-sm: clamp(0.9375rem, 0.9375rem + 0vw, 0.9375rem);
  --mpx-lh-sm: clamp(1.5rem, 1.5rem + 0vw, 1.5rem);

  /* Footnote — Regular */
  --mpx-fs-xs: clamp(0.84375rem, 0.82926rem + 0.061vw, 0.875rem);
  --mpx-lh-xs: clamp(1.5rem, 1.5rem + 0vw, 1.5rem);

  /* Fine Print — Regular */
  --mpx-fs-xxs: clamp(0.75rem, 0.70654rem + 0.183vw, 0.84375rem);
  --mpx-lh-xxs: clamp(1.5rem, 1.5rem + 0vw, 1.5rem);
	
	/* Extra Fine Print — Regular */
  --mpx-fs-xxxs: 0.75rem;
  --mpx-lh-xxxs: 1.5rem;

  /* Font weight */  
  --mpx-fw-n: 400;   /* Normal */
  --mpx-fw-md: 500;   /* Medium */
  --mpx-fw-sb: 600;  /* Semi Bold */
  --mpx-fw-b: 700;   /* Bold */


  /* =======================
     Colors
  ======================= */
  /* Core colors */
  --mpx-clr-pri: #5c2d86;      /* Primary */
  --mpx-clr-sec: #3bb54b;      /* Secondary */
  --mpx-clr-acc-a: #8bc63f;    /* Accent A */
  --mpx-clr-acc-b: #ff7a42;    /* Accent B */
  --mpx-clr-wh: #ffffff;       /* White */
  --mpx-clr-bk-a: #000000;     /* Black */
  --mpx-clr-bk-b: #1a1a24;     /* Background B */

  /* Corresponding RGB values */
  --mpx-clr-pri-rgb: 92, 45, 134;
  --mpx-clr-sec-rgb: 59, 181, 75;
  --mpx-clr-acc-a-rgb: 139, 198, 63;
  --mpx-clr-acc-b-rgb: 255, 122, 66;
  --mpx-clr-wh-rgb: 255, 255, 255;
  --mpx-clr-bk-a-rgb: 0, 0, 0;
  --mpx-clr-bk-b-rgb: 26, 26, 36;       

  /* Grays */
  --mpx-clr-owh: #fafafa;      /* off white */
  --mpx-clr-gray-lt: #f5f7fa;  /* light gray */
  --mpx-clr-gray-dk: #6b7280;  /* dark gray */		

  /* Border colors */
  --mpx-brd-clr-a: #e5e7eb;
  --mpx-brd-clr-b: #d4d4d4;

  /* Feedback alert colors */
  /* Error */
  --mpx-clr-err-d: #dc2626;  /* OKLCH: oklch(64.5% 0.24 28.5) – Urgent, Attention */
  --mpx-clr-err-l: #f5bebe;  /* OKLCH: oklch(88% 0.08 28.5) */

  /* Success */
  --mpx-clr-succ-d: #16a34a; /* OKLCH: oklch(70% 0.18 150) – Confirmation, Growth */
  --mpx-clr-succ-l: #b9e3c9; /* OKLCH: oklch(90% 0.10 150) */

  /* Warning */
  --mpx-clr-warn-d: #eab308; /* OKLCH: oklch(82% 0.18 95) – Caution, Optimism */
  --mpx-clr-warn-l: #f9e8b5; /* OKLCH: oklch(92% 0.08 95) */

  /* Info */
  --mpx-clr-info-d: #2563eb; /* OKLCH: oklch(60% 0.22 265) – Trust, Communication */
  --mpx-clr-info-l: #bed0f9; /* OKLCH: oklch(88% 0.10 265) */


  /* =======================
     Box shadows
  ======================= */
  --mpx-shd-rgb: 0,0,0;            /* black for normal shadows */
  --mpx-shd-rgb-hov: 0, 89, 186;  /* hover/focus */

  --mpx-shd-sm: 0 4px 16px rgba(var(--mpx-shd-rgb), 0.08);
  --mpx-shd-md: 4px 8px 8px 0 rgba(var(--mpx-shd-rgb), 0.08);
  --mpx-shd-lg: 8px 12px 12px 0 rgba(var(--mpx-shd-rgb), 0.08);

  --mpx-shd-hov: 0 4px 16px rgba(var(--mpx-shd-rgb-hov), 0.2);
  --mpx-shd-foc: 0 4px 16px rgba(var(--mpx-shd-rgb-hov), 0.2);

  /* =======================
     Buttons
  ======================= */
  --mpx-btn-pad-pill: 999rem;       /* Pill / Full rounded corners */
  --mpx-btn-pad-sm: 0.5rem 1.5rem;  /* 8px 24px */
  --mpx-btn-pad-md: 0.75rem 1.5rem; /* 12px 24px */
  --mpx-btn-pad-lg: 1rem 1.5rem;    /* 16px 24px */

  /* =======================
     Padding
  ======================= */
  --mpx-pad-sm: 0.5rem;   /* 8px */
  --mpx-pad-md: 0.75rem;  /* 12px */
  --mpx-pad-lg: 1.25rem;  /* 20px */
  --mpx-pad-xl: 1.5rem;   /* 24px */
  --mpx-pad-xxl: 2rem;    /* 32px */

  /* =======================
     Border radius
  ======================= */
  --mpx-brd-sm: 0.25rem;  /* 4px */
  --mpx-brd-md: 0.5rem;   /* 8px */
  --mpx-brd-lg: 1rem;     /* 16px */
  --mpx-brd-pill: 999rem;       /* Pill / Full rounded corners */
	
   /* =======================
     SCROLL HEADER VARIABLES
     Add these below your existing variables
  ======================= */
  
/* Core animation */
--mpx-anim-ms: 180ms;
--mpx-admin-offset: 0px; /* set by JS */

/* =====================================================
   PRIMARY HEADER - SHRINK MODE (DEFAULT)
===================================================== */
--primary-shrink-pad-y: .6rem;
--primary-shrink-bg: rgba(249, 251, 253, 0.5);
--primary-shrink-blur: 12px;
--primary-shrink-shadow: 0 10px 30px rgba(18, 22, 30, 0.15);

/* =====================================================
   SECONDARY HEADER - SHRINK MODE (DEFAULT)
===================================================== */
--secondary-shrink-pad-y: .4rem;
--secondary-shrink-bg: rgba(59, 181, 75, 0.95);
--secondary-shrink-blur: 8px;
--secondary-shrink-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);

  /* Secondary menu link & icon colors */
  --secondary-menu-color: #ffffff; /* Default color when scrolled */
  --secondary-menu-color-hover: #5c2d86; /* Hover color when scrolled */


}