/* ======================================================
   MPX Design Tokens
   Purpose: Global typography, color, spacing, and UI system
   ====================================================== */

:root {

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

   /* =======================
     Typography
  ======================= */

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

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

   --mpx-fs-h3: clamp(1.75rem, 1.40254rem + 1.463vw, 2.5rem);
   --mpx-lh-h3: clamp(2.0625rem, 1.71504rem + 1.463vw, 2.8125rem);

   --mpx-fs-h4: clamp(1.5rem, 1.3841rem + 0.488vw, 1.75rem);
   --mpx-lh-h4: clamp(1.8125rem, 1.6966rem + 0.488vw, 2.0625rem);

   --mpx-fs-h5: clamp(1.25rem, 1.1341rem + 0.488vw, 1.5rem);
   --mpx-lh-h5: clamp(1.5625rem, 1.4466rem + 0.488vw, 1.8125rem);

   --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 */
   --mpx-fs-body: 1rem;
   --mpx-lh-body: clamp(1.4375rem, 1.37955rem + 0.244vw, 1.5625rem);

   /* Sub Text */
   --mpx-fs-sm: 0.9375rem;
   --mpx-lh-sm: 1.4rem;

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

   /* Fine print */
   --mpx-fs-xxs: clamp(0.75rem, 0.70654rem + 0.183vw, 0.84375rem);
   --mpx-lh-xxs: 1.4rem;

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


   /* =======================
     Colors
  ======================= */

   /* Core brand */
   --mpx-clr-pri: #0b0b0b;
   --mpx-clr-sec: #c9a24d;
   --mpx-clr-acc-a: #161616;
   --mpx-clr-acc-b: #232323;
   --mpx-clr-wh: #ffffff;
   --mpx-clr-blk: #000000;

   /* RGB helpers */
   --mpx-clr-pri-rgb: 11, 11, 11;
   --mpx-clr-sec-rgb: 201, 162, 77;
   --mpx-clr-acc-a-rgb: 22, 22, 22;
   --mpx-clr-acc-b-rgb: 35, 35, 35;
   --mpx-clr-wh-rgb: 255, 255, 255;
   --mpx-clr-blk-rgb: 0, 0, 0;

   /* Neutrals */
   --mpx-clr-owh: #fafafa;
   --mpx-clr-gray-d: #8a8a8a;
   --mpx-clr-gray-l: #b8b8b8;

   /* Border colors */
   --mpx-brd-d: #2e2e2e;
   --mpx-brd-l: #d6d6d6;

   /* Feedback colors */
   --mpx-clr-err-d: #c63636;
   --mpx-clr-err-l: #fcecea;

   --mpx-clr-succ-d: #1f8f55;
   --mpx-clr-succ-l: #eaf4ed;

   --mpx-clr-warn-d: #d08a1e;
   --mpx-clr-warn-l: #fbf3eb;

   --mpx-clr-info-d: #4f6fdc;
   --mpx-clr-info-l: #ecf1fd;

   /* =======================
     Shadows
  ======================= */

   /* Shadow color sources */
   --mpx-shd-rgb: var(--mpx-clr-blk-rgb);
   --mpx-shd-rgb-hov: var(--mpx-clr-sec-rgb);

   /* Horizontal */
   --mpx-shd-h-sm: 8px 0 8px rgba(var(--mpx-shd-rgb), 0.08);
   --mpx-shd-h-md: 12px 0 8px rgba(var(--mpx-shd-rgb), 0.16);
   --mpx-shd-h-lg: 16px 0 8px rgba(var(--mpx-shd-rgb), 0.2);

   /* Vertical */
   --mpx-shd-v-sm: 0 8px 8px rgba(var(--mpx-shd-rgb), 0.08);
   --mpx-shd-v-md: 0 12px 8px rgba(var(--mpx-shd-rgb), 0.16);
   --mpx-shd-v-lg: 0 16px 8px rgba(var(--mpx-shd-rgb), 0.2);

   /* Combined */
   --mpx-shd-hv-sm: 2px 4px 8px rgba(var(--mpx-shd-rgb), 0.08);
   --mpx-shd-hv-md: 4px 8px 16px rgba(var(--mpx-shd-rgb), 0.16);
   --mpx-shd-hv-lg: 8px 16px 16px rgba(var(--mpx-shd-rgb), 0.2);

   /* Hover / focus */
   --mpx-shd-hov: 0 0 12px 4px rgba(var(--mpx-shd-rgb-hov), 0.16);
   --mpx-shd-foc: 0 0 12px 4px rgba(var(--mpx-shd-rgb-hov), 0.2);

   /* =======================
     Buttons
  ======================= */
   --mpx-btn-pad-sm: 0.5rem 1.5rem;
   --mpx-btn-pad-md: 0.75rem 1.5rem;
   --mpx-btn-pad-lg: 1rem 1.5rem;

   /* =======================
     Spacing
  ======================= */
   --mpx-pad-sm: 0.5rem;
   --mpx-pad-md: 0.75rem;
   --mpx-pad-lg: 1.25rem;
   --mpx-pad-xl: 1.5rem;
   --mpx-pad-xxl: 2rem;

   /* =======================
     Radius
  ======================= */
   --mpx-brd-sm: 0.5rem;
   --mpx-brd-md: 0.75rem;
   --mpx-brd-lg: 1rem;
   --mpx-brd-pill: 999rem;

/* =======================
   SCROLL HEADER VARIABLES
   Add these below your existing variables
======================= */

/* =======================
   CORE ANIMATION
======================= */

--mpx-anim-ms: 180ms; /* Duration of scroll animation for headers */
--mpx-admin-offset: 0px; /* Offset for WordPress admin bar, set by JS */


/* =======================
   PRIMARY HEADER - SHRINK MODE
======================= */

--primary-shrink-pad-y: .6rem; /* Vertical padding when header shrinks */
--primary-shrink-bg: rgba(var(--mpx-clr-pri-rgb), 0.5); /* Background color on scroll/shrink */
--primary-shrink-blur: 12px; /* Blur effect on header background when scrolled */
--primary-shrink-shadow: 0 10px 30px rgba(var(--mpx-clr-blk-rgb), 0.15); /* Shadow on header when scrolled */


/* =======================
   SECONDARY HEADER - SHRINK MODE
======================= */

--secondary-shrink-pad-y: .4rem; /* Vertical padding when secondary header shrinks */
--secondary-shrink-bg: rgba(var(--mpx-clr-pri-rgb), 0.5); /* Background color on scroll/shrink */
--secondary-shrink-blur: 8px; /* Blur effect on secondary header */
--secondary-shrink-shadow: 0 5px 20px rgba(var(--mpx-clr-wh-rgb), 0.1); /* Shadow on secondary header */


/* =======================
   SECONDARY MENU - SCROLLED STATE
======================= */

--secondary-menu-color: rgba(var(--mpx-clr-wh-rgb)); /* Default text/icon color */
--secondary-menu-color-hover: rgba(var(--mpx-clr-sec-rgb)); /* Color on hover */
	
}