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

:root {
	--mpx-clr-bk: var(--mpx-clr-blk);
	--mpx-clr-gray-lt: var(--mpx-clr-gray-l);
	--mpx-brd-clr-a: var(--mpx-brd-l);
	--primary-menu-color: inherit;
	--primary-menu-color-hover: inherit;

	/* Fonts */
	/* Default family is configured in includes/core/assets.php: muplix_font_settings(). */
	--mpx-ff-a: var(--mpx-font-family, 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: #E31B23;
	--mpx-clr-pri-alt: #B6161C;
	--mpx-clr-sec: #171717;
	--mpx-clr-acc-a: #285B70;
	--mpx-clr-acc-a-soft: #B5DFE8;
	--mpx-clr-acc-b: #F0B641;
	--mpx-clr-acc-b-soft: #F1D39B;
	--mpx-clr-wh: #FFFFFF;
	--mpx-clr-blk: #0B0B0C;

	/* RGB helpers */
	--mpx-clr-pri-rgb: 227, 27, 35;
	--mpx-clr-sec-rgb: 23, 23, 23;
	--mpx-clr-acc-a-rgb: 40, 91, 112;
	--mpx-clr-acc-a-soft-rgb: 181, 223, 232;
	--mpx-clr-acc-b-rgb: 240, 182, 65;
	--mpx-clr-acc-b-soft-rgb: 241, 211, 155;
	--mpx-clr-wh-rgb: 255, 255, 255;
	--mpx-clr-blk-rgb: 11, 11, 12;

	/* Neutrals */
	--mpx-clr-owh: #FAFAFA;
	--mpx-clr-gray-l: #D1D5DB;
	--mpx-clr-gray-d: #4B5563;

	/* Border colors */
	--mpx-brd-l: #E5E7EB;
	--mpx-brd-d: #2B2F36;

	/* Surface colors */
	--mpx-surface-l: #F8F9FB;
	--mpx-surface-d: #111315;

	/* Feedback colors */
	/* Light = light background | Dark = dark background */
	--mpx-clr-err-l: #A52C45;
	--mpx-clr-err-d: #EFA1AD;

	--mpx-clr-succ-l: #25724D;
	--mpx-clr-succ-d: #93CEAB;

	--mpx-clr-warn-l: #9A5522;
	--mpx-clr-warn-d: #E6BB85;

	--mpx-clr-info-l: #485A96;
	--mpx-clr-info-d: #A9BCE5;

	/* Disabled colors */
	--mpx-clr-disabled-l: #7B8490;
	--mpx-clr-disabled-d: #8F98A5;

	/* 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
     Shared settings for the primary and secondary scroll headers
  ======================= */

	/* 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-blk-rgb), 0.1);
	/* Shadow on secondary header */

	/* Secondary menu colors when scrolled */
	--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 */

	/* OPTIONAL PILL HEADER / SAVED-TEMPLATE NAVIGATION */
	--mpx-header-pill-width: 50rem;
	--mpx-header-pill-gap: 1.15rem;
	--mpx-header-pill-gutter: var(--mpx-pad-lg);
	--mpx-header-pill-padding: var(--mpx-pad-md) var(--mpx-pad-lg);
	--mpx-header-pill-bg: var(--mpx-clr-wh);
	--mpx-header-pill-glass-bg: rgba(var(--mpx-clr-wh-rgb), 0.95);
	--mpx-header-pill-color: var(--mpx-clr-acc-a);
	--mpx-header-pill-link-hover: var(--mpx-clr-sec);
	--mpx-header-pill-border: var(--mpx-brd-l);
	--mpx-header-pill-shadow: var(--mpx-shd-hv-md);
	--mpx-header-pill-blur: 12px;
	--mpx-nav-width: 100%;
	--mpx-nav-padding: 0;
	--mpx-nav-bg: transparent;
	--mpx-nav-color: inherit;
	--mpx-nav-backdrop: rgba(var(--mpx-clr-blk-rgb), 0.6);
}