:root {

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

  /* Headings */
  --mpx-fs-h1: clamp(2.5rem, 1.92074rem + 2.439vw, 3.75rem);      /* ~60px */
  --mpx-lh-h1: clamp(2.8125rem, 2.23324rem + 2.439vw, 4.0625rem); /* ~65px line-height */

  --mpx-fs-h2: clamp(2rem, 1.53664rem + 1.951vw, 3rem);           /* ~48px */
  --mpx-lh-h2: clamp(2.0625rem, 1.84914rem + 1.951vw, 3.3125rem); /* ~53px line-height */

  --mpx-fs-h3: clamp(1.75rem, 1.40254rem + 1.463vw, 2.5rem);      /* ~40px */
  --mpx-lh-h3: clamp(2.0625rem, 1.71504rem + 1.463vw, 2.8125rem); /* ~45px line-height */

  --mpx-fs-h4: clamp(1.5rem, 1.3841rem + 0.488vw, 1.75rem);       /* ~28px */
  --mpx-lh-h4: clamp(1.8125rem, 1.6966rem + 0.488vw, 2.0625rem);  /* ~33px line-height */

  --mpx-fs-h5: clamp(1.25rem, 1.1341rem + 0.488vw, 1.5rem);       /* ~24px */
  --mpx-lh-h5: clamp(1.5625rem, 1.4466rem + 0.488vw, 1.8125rem);  /* ~29px line-height */

  --mpx-fs-h6: clamp(1.125rem, 1.06705rem + 0.244vw, 1.25rem);    /* ~20px */
  --mpx-lh-h6: clamp(1.4375rem, 1.37955rem + 0.244vw, 1.5625rem); /* ~25px line-height */

  /* Body Text */
  --mpx-fs-body: 1rem;                                           /* 16px */
  --mpx-lh-body: clamp(1.3125rem, 1.37955rem + 0.244vw, 1.5625rem); /* ~21px line-height */

  --mpx-fs-sm: 0.9375rem;   /* 15px */
  --mpx-lh-sm: clamp(1.25rem, 1.5rem + 0vw, 1.5rem);           /* ~20px line-height */

  --mpx-fs-xs: 0.84375rem;  /* 13.5px */
  --mpx-lh-xs: clamp(1.125rem, 1.25rem + 0vw, 1.25rem);        /* ~18.5px line-height */

  --mpx-fs-xxs: 0.75rem;    /* 12px */
  --mpx-lh-xxs: clamp(1.0625rem, 1.0625rem + 0vw, 1.0625rem);  /* ~17px line-height */

  /* 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: #2c016c;
  --mpx-clr-sec: #5f22d9;
  --mpx-clr-acc-a: #ffc107;
  --mpx-clr-acc-b: #c92b28;
  --mpx-clr-wh: #ffffff;
  --mpx-clr-bk: #0a0a0a;
	
	/* RGB colors */
  --mpx-clr-pri-rgb: 44, 1, 108;      
  --mpx-clr-sec-rgb: 95, 34, 217;     
  --mpx-clr-acc-a-rgb: 255, 193, 7;   
  --mpx-clr-acc-b-rgb: 201, 43, 40;   
  --mpx-clr-wh-rgb: 255, 255, 255;    
  --mpx-clr-bk-rgb: 10, 10, 10;  

  /* Grays */
  --mpx-clr-owh: #fafafa;      /* off white */
  --mpx-clr-gray-lt: #b3b3b3;  /* light gray */
  --mpx-clr-gray-dk: #4d4d4d;  /* dark gray */

  /* Feedback colors */
  --mpx-clr-err: #c30000;
  --mpx-clr-err-bg: #f9e6e6;
  --mpx-clr-succ: #00a681;
  --mpx-clr-succ-bg: #e6f6f2;

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


  /* =======================
     Box shadows
  ======================= */
  --mpx-shd-rgb: 0,0,0;            /* black for normal shadows */
  --mpx-shd-rgb-hov: 95, 34, 217;  /* purple for 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 10px 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 */

}

/* Global accent color for form controls */
body {
  accent-color: var(--mpx-clr-sec) !important;
}