/* =========================
   MG LEADBUILDER 2025 - DESIGN SYSTEM V1
   Main entry point - now uses WordPress enqueuing instead of @import
   ========================= */

/* Global layer order - declared once here for the entire system */
@layer reset, base, components, utilities, overrides;

/* Color scheme hint for form controls and dark theme support */
:root { 
  color-scheme: light dark;
  
  /* Layout Variables - Matches Elementor Site Settings */
  --mg-content-max-width: 1400px; /* Desktop max width - responsive scaling handled by Elementor */
}

/* =========================
   TYPOGRAPHY ALIASES
   Stable aliases for Elementor global typography variables
   ========================= */

:root {
  /* =========================
     SYSTEM TYPOGRAPHY ALIASES
     ========================= */
  
  /* Default Heading - Elementor system typography - Primary */
  --mg-font-default-heading-family: var(--e-global-typography-primary-font-family, "Georgia"), serif;
  
  /* Default Subtitle - Elementor system typography - Secondary */
  --mg-font-default-subtitle-family: var(--e-global-typography-secondary-font-family, Arial), Helvetica, sans-serif;
  
  /* Default Body - Elementor system typography - Text */
  --mg-font-default-body-family: var(--e-global-typography-text-font-family, Arial), Helvetica, sans-serif;
  
  /* Default Accent - Elementor system typography - Accent */
  --mg-font-default-accent-family: var(--e-global-typography-accent-font-family, Arial), Helvetica, sans-serif;

  /* =========================
     HEADING ALIASES (Georgia fallbacks)
     ========================= */
  
  /* H1 - Semantic H1 - Full Elementor Bridge */
  --mg-font-h1-family: var(--e-global-typography-8888fbc-font-family, "Georgia"), serif;
  --mg-font-h1-size: var(--e-global-typography-8888fbc-font-size, clamp(1.75rem, 2.5vw, 2.25rem));
  --mg-font-h1-weight: var(--e-global-typography-ac5d448-font-weight, 700);
  --mg-font-h1-line: var(--e-global-typography-8888fbc-line-height, 1.3);
  --mg-font-h1-track: var(--e-global-typography-8888fbc-letter-spacing, -0.01em);
  
  /* H2 - Semantic H2 - Full Elementor Bridge */
  --mg-font-h2-family: var(--e-global-typography-2d260fa-font-family, "Georgia"), serif;
  --mg-font-h2-size: var(--e-global-typography-2d260fa-font-size, clamp(1.5rem, 2vw, 2rem));
  --mg-font-h2-weight: var(--e-global-typography-db81887-font-weight, 700);
  --mg-font-h2-line: var(--e-global-typography-2d260fa-line-height, 1.4);
  --mg-font-h2-track: var(--e-global-typography-2d260fa-letter-spacing, -0.01em);
  
  /* H3 - Semantic H3 - Full Elementor Bridge */
  --mg-font-h3-family: var(--e-global-typography-1aeb897-font-family, "Georgia"), serif;
  --mg-font-h3-size: var(--e-global-typography-1aeb897-font-size, clamp(1.25rem, 1.5vw, 1.75rem));
  --mg-font-h3-weight: var(--e-global-typography-1218e41-font-weight, 700);
  --mg-font-h3-line: var(--e-global-typography-1aeb897-line-height, 1.4);
  --mg-font-h3-track: var(--e-global-typography-1aeb897-letter-spacing, -0.01em);
  
  /* H4 - Semantic H4 - Full Elementor Bridge */
  --mg-font-h4-family: var(--e-global-typography-a6e1172-font-family, "Georgia"), serif;
  --mg-font-h4-size: var(--e-global-typography-a6e1172-font-size, clamp(1.125rem, 1.2vw, 1.5rem));
  --mg-font-h4-weight: var(--e-global-typography-f11f36d-font-weight, 700);
  --mg-font-h4-line: var(--e-global-typography-a6e1172-line-height, 1.5);
  --mg-font-h4-track: var(--e-global-typography-a6e1172-letter-spacing, -0.01em);
  
  /* H5 - Semantic H5 - Full Elementor Bridge */
  --mg-font-h5-family: var(--e-global-typography-1e631b4-font-family, "Georgia"), serif;
  --mg-font-h5-size: var(--e-global-typography-1e631b4-font-size, clamp(1.125rem, 1vw, 1.375rem));
  --mg-font-h5-weight: var(--e-global-typography-e53e1e3-font-weight, 700);
  --mg-font-h5-line: var(--e-global-typography-1e631b4-line-height, 1.5);
  --mg-font-h5-track: var(--e-global-typography-1e631b4-letter-spacing, -0.01em);
  
  /* H6 - Semantic H6 - Full Elementor Bridge */
  --mg-font-h6-family: var(--e-global-typography-8dcc2a6-font-family, "Georgia"), serif;
  --mg-font-h6-size: var(--e-global-typography-8dcc2a6-font-size, clamp(1rem, 1vw, 1.125rem));
  --mg-font-h6-weight: var(--e-global-typography-1409b2b-font-weight, 700);
  --mg-font-h6-line: var(--e-global-typography-8dcc2a6-line-height, 1.5);
  --mg-font-h6-track: var(--e-global-typography-8dcc2a6-letter-spacing, -0.01em);
  
  /* Hero Headline - Large homepage hero title - Full Elementor Bridge */
  --mg-font-hero-headline-family: var(--e-global-typography-bf1f30a-font-family, "Georgia"), serif;
  --mg-font-hero-headline-size: var(--e-global-typography-bf1f30a-font-size, clamp(2.25rem, 5vw, 3rem));
  --mg-font-hero-headline-weight: var(--e-global-typography-525ef95-font-weight, 700);
  --mg-font-hero-headline-line: var(--e-global-typography-bf1f30a-line-height, 1.2);
  --mg-font-hero-headline-track: var(--e-global-typography-bf1f30a-letter-spacing, -0.02em);
  
  /* Page Hero Headline - H1 on internal pages - Full Elementor Bridge */
  --mg-font-page-hero-headline-family: var(--e-global-typography-49e3013-font-family, "Georgia"), serif;
  --mg-font-page-hero-headline-size: var(--e-global-typography-49e3013-font-size, clamp(2rem, 3vw, 2.5rem));
  --mg-font-page-hero-headline-weight: var(--e-global-typography-49e3013-font-weight, 700);
  --mg-font-page-hero-headline-line: var(--e-global-typography-49e3013-line-height, 1.3);
  --mg-font-page-hero-headline-track: var(--e-global-typography-49e3013-letter-spacing, -0.01em);
  
  /* Section Headline - Headings for reusable layout sections - Full Elementor Bridge */
  --mg-font-section-headline-family: var(--e-global-typography-a376e0d-font-family, var(--e-global-typography-primary-font-family, "Changa One")), serif;
  --mg-font-section-headline-size: var(--e-global-typography-a376e0d-font-size, clamp(1.5rem, 2vw, 2rem));
  --mg-font-section-headline-weight: var(--e-global-typography-323b6bb-font-weight, 700);
  --mg-font-section-headline-line: var(--e-global-typography-a376e0d-line-height, 1.4);
  --mg-font-section-headline-track: var(--e-global-typography-a376e0d-letter-spacing, -0.01em);
  
  /* XL Heading - Largest display headline - Full Elementor Bridge */
  --mg-font-xl-heading-family: var(--e-global-typography-197d847-font-family, "Georgia"), serif;
  --mg-font-xl-heading-size: var(--e-global-typography-197d847-font-size, clamp(2.5rem, 6vw, 3.5rem));
  --mg-font-xl-heading-weight: var(--e-global-typography-d331b24-font-weight, 700);
  --mg-font-xl-heading-line: var(--e-global-typography-197d847-line-height, 1.2);
  --mg-font-xl-heading-track: var(--e-global-typography-197d847-letter-spacing, -0.03em);
  
  /* Widget Heading - Headings inside feature widgets - Full Elementor Bridge */
  --mg-font-widget-heading-family: var(--e-global-typography-77c1919-font-family, "Georgia"), serif;
  --mg-font-widget-heading-size: var(--e-global-typography-77c1919-font-size, clamp(1.25rem, 1.2vw, 1.5rem));
  --mg-font-widget-heading-weight: var(--e-global-typography-da119c4-font-weight, 700);
  --mg-font-widget-heading-line: var(--e-global-typography-77c1919-line-height, 1.4);
  --mg-font-widget-heading-track: var(--e-global-typography-77c1919-letter-spacing, -0.01em);

  /* =========================
     BODY TEXT ALIASES (Arial fallbacks)
     ========================= */
  
  /* Hero Subtitle - Supporting tagline below hero - Full Elementor Bridge */
  --mg-font-hero-subtitle-family: var(--e-global-typography-69f7277-font-family, Arial), Helvetica, sans-serif;
  --mg-font-hero-subtitle-size: var(--e-global-typography-69f7277-font-size, clamp(1.25rem, 2vw, 1.5rem));
  --mg-font-hero-subtitle-weight: var(--e-global-typography-f9dbe14-font-weight, 400);
  --mg-font-hero-subtitle-line: var(--e-global-typography-69f7277-line-height, 1.6);
  --mg-font-hero-subtitle-track: var(--e-global-typography-69f7277-letter-spacing, normal);
  
  /* Page Intro Text - Descriptive text below page title - Full Elementor Bridge */
  --mg-font-page-intro-text-family: var(--e-global-typography-80351d4-font-family, Arial), Helvetica, sans-serif;
  --mg-font-page-intro-text-size: var(--e-global-typography-80351d4-font-size, clamp(1rem, 1.5vw, 1.25rem));
  --mg-font-page-intro-text-weight: var(--e-global-typography-80351d4-font-weight, 400);
  --mg-font-page-intro-text-line: var(--e-global-typography-80351d4-line-height, 1.6);
  --mg-font-page-intro-text-track: var(--e-global-typography-80351d4-letter-spacing, normal);
  
  /* Body Text - Default paragraph text - Full Elementor Bridge */
  --mg-font-body-family: var(--e-global-typography-2be4649-font-family, Arial), Helvetica, sans-serif;
  --mg-font-body-size: var(--e-global-typography-2be4649-font-size, clamp(1rem, 1vw, 1.125rem));
  --mg-font-body-weight: var(--e-global-typography-899c25a-font-weight, 400);
  --mg-font-body-line: var(--e-global-typography-2be4649-line-height, 1.6);
  --mg-font-body-track: var(--e-global-typography-2be4649-letter-spacing, normal);
  
  /* Body Text Bold - Strong body emphasis - Full Elementor Bridge */
  --mg-font-body-bold-family: var(--e-global-typography-3b48255-font-family, Arial), Helvetica, sans-serif;
  --mg-font-body-bold-size: var(--e-global-typography-3b48255-font-size, clamp(1rem, 1vw, 1.125rem));
  --mg-font-body-bold-weight: var(--e-global-typography-e58e3ed-font-weight, 700);
  --mg-font-body-bold-line: var(--e-global-typography-3b48255-line-height, 1.6);
  --mg-font-body-bold-track: var(--e-global-typography-3b48255-letter-spacing, normal);
  
  /* Body Text Underlined - Underlined body links - Full Elementor Bridge */
  --mg-font-body-underlined-family: var(--e-global-typography-205573c-font-family, Arial), Helvetica, sans-serif;
  --mg-font-body-underlined-size: var(--e-global-typography-205573c-font-size, clamp(1rem, 1vw, 1.125rem));
  --mg-font-body-underlined-weight: var(--e-global-typography-205573c-font-weight, 400);
  --mg-font-body-underlined-line: var(--e-global-typography-205573c-line-height, 1.6);
  --mg-font-body-underlined-track: var(--e-global-typography-205573c-letter-spacing, normal);
  
  /* Body Large - Slightly enlarged body text - Full Elementor Bridge */
  --mg-font-body-large-family: var(--e-global-typography-9b2d951-font-family, Arial), Helvetica, sans-serif;
  --mg-font-body-large-size: var(--e-global-typography-9b2d951-font-size, clamp(1.125rem, 1vw, 1.25rem));
  --mg-font-body-large-weight: var(--e-global-typography-9b2d951-font-weight, 400);
  --mg-font-body-large-line: var(--e-global-typography-9b2d951-line-height, 1.6);
  --mg-font-body-large-track: var(--e-global-typography-9b2d951-letter-spacing, normal);
  
  /* Body Large Bold - Large bold paragraph - Full Elementor Bridge */
  --mg-font-body-large-bold-family: var(--e-global-typography-58e7f5f-font-family, Arial), Helvetica, sans-serif;
  --mg-font-body-large-bold-size: var(--e-global-typography-58e7f5f-font-size, clamp(1.125rem, 1vw, 1.25rem));
  --mg-font-body-large-bold-weight: var(--e-global-typography-58e7f5f-font-weight, 700);
  --mg-font-body-large-bold-line: var(--e-global-typography-58e7f5f-line-height, 1.6);
  --mg-font-body-large-bold-track: var(--e-global-typography-58e7f5f-letter-spacing, normal);
  
  /* Body Large Underlined - Large underlined body - Full Elementor Bridge */
  --mg-font-body-large-underlined-family: var(--e-global-typography-205573c-font-family, Arial), Helvetica, sans-serif;
  --mg-font-body-large-underlined-size: var(--e-global-typography-205573c-font-size, clamp(1.125rem, 1vw, 1.25rem));
  --mg-font-body-large-underlined-weight: var(--e-global-typography-205573c-font-weight, 400);
  --mg-font-body-large-underlined-line: var(--e-global-typography-205573c-line-height, 1.6);
  --mg-font-body-large-underlined-track: var(--e-global-typography-205573c-letter-spacing, normal);
  
  /* Body XL - Extra large body text for emphasis - Full Elementor Bridge */
  --mg-font-body-xl-family: var(--e-global-typography-xl00001-font-family, Arial), Helvetica, sans-serif;
  --mg-font-body-xl-size: var(--e-global-typography-xl00001-font-size, clamp(1.25rem, 1.25vw, 1.5rem));
  --mg-font-body-xl-weight: var(--e-global-typography-xl00001-font-weight, 400);
  --mg-font-body-xl-line: var(--e-global-typography-xl00001-line-height, 1.6);
  --mg-font-body-xl-track: var(--e-global-typography-xl00001-letter-spacing, normal);
  
  /* Body XL Bold - Extra large bold body text - Full Elementor Bridge */
  --mg-font-body-xl-bold-family: var(--e-global-typography-xl00002-font-family, Arial), Helvetica, sans-serif;
  --mg-font-body-xl-bold-size: var(--e-global-typography-xl00002-font-size, clamp(1.25rem, 1.25vw, 1.5rem));
  --mg-font-body-xl-bold-weight: var(--e-global-typography-xl00002-font-weight, 700);
  --mg-font-body-xl-bold-line: var(--e-global-typography-xl00002-line-height, 1.6);
  --mg-font-body-xl-bold-track: var(--e-global-typography-xl00002-letter-spacing, normal);
  
  /* Body XL Underlined - Extra large underlined body text - Full Elementor Bridge */
  --mg-font-body-xl-underlined-family: var(--e-global-typography-xl00003-font-family, Arial), Helvetica, sans-serif;
  --mg-font-body-xl-underlined-size: var(--e-global-typography-xl00003-font-size, clamp(1.25rem, 1.25vw, 1.5rem));
  --mg-font-body-xl-underlined-weight: var(--e-global-typography-xl00003-font-weight, 400);
  --mg-font-body-xl-underlined-line: var(--e-global-typography-xl00003-line-height, 1.6);
  --mg-font-body-xl-underlined-track: var(--e-global-typography-xl00003-letter-spacing, normal);
  
  /* Body Small - For captions, disclaimers - Full Elementor Bridge */
  --mg-font-body-small-family: var(--e-global-typography-232eaab-font-family, Arial), Helvetica, sans-serif;
  --mg-font-body-small-size: var(--e-global-typography-232eaab-font-size, clamp(0.75rem, 1vw, 0.875rem));
  --mg-font-body-small-weight: var(--e-global-typography-232eaab-font-weight, 400);
  --mg-font-body-small-line: var(--e-global-typography-232eaab-line-height, 1.4);
  --mg-font-body-small-track: var(--e-global-typography-232eaab-letter-spacing, normal);
  
  /* Body Small Bold - Strong emphasis for small text - Full Elementor Bridge */
  --mg-font-body-small-bold-family: var(--e-global-typography-6f9c1ed-font-family, Arial), Helvetica, sans-serif;
  --mg-font-body-small-bold-size: var(--e-global-typography-6f9c1ed-font-size, clamp(0.75rem, 1vw, 0.875rem));
  --mg-font-body-small-bold-weight: var(--e-global-typography-6f9c1ed-font-weight, 700);
  --mg-font-body-small-bold-line: var(--e-global-typography-6f9c1ed-line-height, 1.4);
  --mg-font-body-small-bold-track: var(--e-global-typography-6f9c1ed-letter-spacing, normal);
  
  /* Body Small Underlined - Underlined fine print - Full Elementor Bridge */
  --mg-font-body-small-underlined-family: var(--e-global-typography-5a670c2-font-family, Arial), Helvetica, sans-serif;
  --mg-font-body-small-underlined-size: var(--e-global-typography-5a670c2-font-size, clamp(0.75rem, 1vw, 0.875rem));
  --mg-font-body-small-underlined-weight: var(--e-global-typography-5a670c2-font-weight, 400);
  --mg-font-body-small-underlined-line: var(--e-global-typography-5a670c2-line-height, 1.4);
  --mg-font-body-small-underlined-track: var(--e-global-typography-5a670c2-letter-spacing, normal);
  
  /* Body Text XL - Enlarged general content - Full Elementor Bridge */
  --mg-font-xl-body-family: var(--e-global-typography-193cb65-font-family, Arial), Helvetica, sans-serif;
  --mg-font-xl-body-size: var(--e-global-typography-193cb65-font-size, clamp(1.25rem, 2vw, 1.5rem));
  --mg-font-xl-body-weight: var(--e-global-typography-193cb65-font-weight, 400);
  --mg-font-xl-body-line: var(--e-global-typography-193cb65-line-height, 1.6);
  --mg-font-xl-body-track: var(--e-global-typography-193cb65-letter-spacing, normal);

  /* =========================
     UTILITY TEXT ALIASES (Arial fallbacks)
     ========================= */
  
  /* Uppercase Text - All caps text - Full Elementor Bridge */
  --mg-font-uppercase-family: var(--e-global-typography-1e421ab-font-family, Arial), Helvetica, sans-serif;
  --mg-font-uppercase-size: var(--e-global-typography-1e421ab-font-size, clamp(1rem, 1vw, 1.125rem));
  --mg-font-uppercase-weight: var(--e-global-typography-1e421ab-font-weight, 500);
  --mg-font-uppercase-line: var(--e-global-typography-1e421ab-line-height, 1.4);
  --mg-font-uppercase-track: var(--e-global-typography-1e421ab-letter-spacing, 0.05em);
  
  /* Navigation Text - Nav and menu links - Full Elementor Bridge */
  --mg-font-navigation-family: var(--e-global-typography-ffbb45f-font-family, Arial), Helvetica, sans-serif;
  --mg-font-navigation-size: var(--e-global-typography-ffbb45f-font-size, clamp(0.875rem, 1vw, 1rem));
  --mg-font-navigation-weight: var(--e-global-typography-ffbb45f-font-weight, 500);
  --mg-font-navigation-line: var(--e-global-typography-ffbb45f-line-height, 1.5);
  --mg-font-navigation-track: var(--e-global-typography-ffbb45f-letter-spacing, 0.02em);
  
  /* Button Text - Primary button font - Full Elementor Bridge */
  --mg-font-button-family: var(--e-global-typography-850b8ec-font-family, Arial), Helvetica, sans-serif;
  --mg-font-button-size: var(--e-global-typography-850b8ec-font-size, clamp(0.875rem, 1vw, 1rem));
  --mg-font-button-weight: var(--e-global-typography-850b8ec-font-weight, 700);
  --mg-font-button-line: var(--e-global-typography-850b8ec-line-height, 1.5);
  --mg-font-button-track: var(--e-global-typography-850b8ec-letter-spacing, 0.02em);
  
  /* Button Text Large - Bigger button font - Full Elementor Bridge */
  --mg-font-button-large-family: var(--e-global-typography-69859c2-font-family, Arial), Helvetica, sans-serif;
  --mg-font-button-large-size: var(--e-global-typography-69859c2-font-size, clamp(1rem, 1vw, 1.125rem));
  --mg-font-button-large-weight: var(--e-global-typography-69859c2-font-weight, 700);
  --mg-font-button-large-line: var(--e-global-typography-69859c2-line-height, 1.5);
  --mg-font-button-large-track: var(--e-global-typography-69859c2-letter-spacing, 0.02em);
  
  /* Monospace Font - For code, IDs, OTPs */
  --mg-font-mono-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* =========================
     EFFECT TOKENS
     ========================= */
  
  /* Shadow tokens */
  --mg-shadow-1: 0 1px 2px rgba(0,0,0,.08);
  --mg-shadow-2: 0 4px 8px rgba(0,0,0,.10);
  --mg-shadow-3: 0 10px 24px rgba(0,0,0,.12);
  
  /* Utility shadow variables (matches vibes system) */
  --mg-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --mg-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --mg-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --mg-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

  /* Radius tokens (responsive - overridden by vibes system when active) */
  --mg-radius-sm: clamp(0.1875rem, 0.3vw, 0.25rem);
  --mg-radius-md: clamp(0.375rem, 0.5vw, 0.5rem);
  --mg-radius-lg: clamp(0.625rem, 0.8vw, 0.75rem);
  --mg-radius-xl: clamp(0.875rem, 1vw, 1rem);

  /* =========================
     COLOR ALIASES
     Stable aliases for Elementor global colors and design tokens
     ========================= */
  
  /* Brand Colors - Map Elementor (or your tokens) -> stable aliases */
  /* Note: Actual color values are defined in mg-colors.css which loads later */
  /* These reference Elementor variables only - no hardcoded fallbacks */
  --mg-color-primary:   var(--e-global-color-primary);
  --mg-color-secondary: var(--e-global-color-secondary);
  --mg-color-accent:    var(--e-global-color-accent);

  /* Text Colors */
  --mg-color-text:      var(--e-global-color-text);
  --mg-color-success:   var(--color-success,  #16a34a);
  --mg-color-warning:   var(--color-warning,  #d97706);
  --mg-color-danger:    var(--color-error,    #dc2626);
  --mg-color-info:      var(--color-info,     #0284c7);

  /* Neutrals - Proper grayscale from white to black */
  --mg-neutral-white: #ffffff;
  --mg-neutral-50:   #fafafa;
  --mg-neutral-100:  #f5f5f5;
  --mg-neutral-200:  #e5e5e5;
  --mg-neutral-300:  #d4d4d4;
  --mg-neutral-400:  #a3a3a3;
  --mg-neutral-500:  #737373;
  --mg-neutral-600:  #525252;
  --mg-neutral-700:  #404040;
  --mg-neutral-800:  #262626;
  --mg-neutral-900:  #171717;
  --mg-neutral-black: #000000;

  /* Neutral Colors - Map to Elementor globals when available */
  --mg-color-neutral-white: var(--e-global-color-neutral-white, var(--mg-neutral-white));
  --mg-color-neutral-50:    var(--e-global-color-neutral-50,    var(--mg-neutral-50));
  --mg-color-neutral-100:   var(--e-global-color-neutral-100,   var(--mg-neutral-100));
  --mg-color-neutral-200:   var(--e-global-color-neutral-200,   var(--mg-neutral-200));
  --mg-color-neutral-300:   var(--e-global-color-neutral-300,   var(--mg-neutral-300));
  --mg-color-neutral-400:   var(--e-global-color-neutral-400,   var(--mg-neutral-400));
  --mg-color-neutral-500:   var(--e-global-color-neutral-500,   var(--mg-neutral-500));
  --mg-color-neutral-600:   var(--e-global-color-neutral-600,   var(--mg-neutral-600));
  --mg-color-neutral-700:   var(--e-global-color-neutral-700,   var(--mg-neutral-700));
  --mg-color-neutral-800:   var(--e-global-color-neutral-800,   var(--mg-neutral-800));
  --mg-color-neutral-900:   var(--e-global-color-neutral-900,   var(--mg-neutral-900));
  --mg-color-neutral-black: var(--e-global-color-neutral-black, var(--mg-neutral-black));
  
  /* Force define Elementor neutral variables for frontend (all possible name variations) */
  --e-global-color-neutral-white: var(--mg-neutral-white);
  --e-global-color-neutralwhite: var(--mg-neutral-white);
  --e-global-color-neutral_white: var(--mg-neutral-white);
  --e-global-color-neutral-50:    var(--mg-neutral-50);
  --e-global-color-neutral50:     var(--mg-neutral-50);
  --e-global-color-neutral_50:    var(--mg-neutral-50);
  --e-global-color-neutral-100:   var(--mg-neutral-100);
  --e-global-color-neutral100:    var(--mg-neutral-100);
  --e-global-color-neutral_100:   var(--mg-neutral-100);
  --e-global-color-neutral-200:   var(--mg-neutral-200);
  --e-global-color-neutral-300:   var(--mg-neutral-300);
  --e-global-color-neutral-400:   var(--mg-neutral-400);
  --e-global-color-neutral-500:   var(--mg-neutral-500);
  --e-global-color-neutral-600:   var(--mg-neutral-600);
  --e-global-color-neutral-700:   var(--mg-neutral-700);
  --e-global-color-neutral-800:   var(--mg-neutral-800);
  --e-global-color-neutral-900:   var(--mg-neutral-900);
  --e-global-color-neutral-black: var(--mg-neutral-black);

  /* Paired "on-" colors for readable text atop fills */
  --mg-on-primary:  #ffffff;
  --mg-on-secondary:#ffffff;
  --mg-on-accent:   #073042;
  --mg-on-success:  #ffffff;
  --mg-on-warning:  #111827;
  --mg-on-danger:   #ffffff;

  /* Overlays */
  --mg-overlay-dark:  rgba(0,0,0,.45);
  --mg-overlay-light: rgba(255,255,255,.35);

  /* Border tone derived from text */
  --mg-color-border: color-mix(in srgb, var(--mg-color-text) 14%, transparent);

  /* =========================
     BORDER WIDTH TOKENS
     Canonical border widths with legacy aliases
     ========================= */
  --mg-border-1: 1px;
  --mg-border-2: 2px;
  --mg-border-3: 3px;

  /* Legacy aliases for backward compatibility */
  --mg-border-thin:  var(--mg-border-1);
  --mg-border:       var(--mg-border-1);
  --mg-border-thick: var(--mg-border-2);
  --mg-border-heavy: var(--mg-border-3);

  /* =========================
     GRADIENT TOKENS
     Themeable gradient system for easy art direction
     ========================= */

  /* Gradient angle - can be changed for different visual styles */
  --mg-gradient-text-angle: 135deg;

  /* Gradient color stops - can be customized per brand */
  --mg-gradient-primary-stops: var(--mg-color-primary), var(--mg-color-accent);
  --mg-gradient-secondary-stops: var(--mg-color-secondary), var(--mg-color-primary);
  --mg-gradient-accent-stops: var(--mg-color-accent), var(--mg-color-primary);
  --mg-gradient-rainbow-stops: #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080;
}

/* =========================
   GRADIENT UTILITY CLASSES
   ========================= */

body.mg-design-system :where(.mg-text-gradient-primary) {
  background: linear-gradient(135deg, var(--mg-color-primary-light), var(--mg-color-primary-dark));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.mg-design-system :where(.mg-text-gradient-secondary) {
  background: linear-gradient(135deg, var(--mg-color-secondary-light), var(--mg-color-secondary-dark));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.mg-design-system :where(.mg-text-gradient-accent) {
  background: linear-gradient(135deg, var(--mg-color-accent-light), var(--mg-color-accent-dark));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.mg-design-system :where(.mg-text-gradient-brand) {
  background: linear-gradient(135deg, var(--mg-color-primary), var(--mg-color-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Fallback when color-mix is unsupported */
@supports not (color: color-mix(in srgb, white 50%, black 50%)) {
  :root { 
    --mg-color-border: rgba(15, 23, 42, 0.14); /* based on #0f172a @ 14% */
  }
}

/* =========================
   LIGHT/DARK THEMING HOOKS
   Override gradient tokens for theme variations
   ========================= */

[data-theme="dark"] {
  /* Dark theme gradient adjustments */
  --mg-gradient-text-angle: 150deg;
  --mg-gradient-primary-stops: var(--mg-color-primary), var(--mg-color-accent);
  --mg-gradient-secondary-stops: var(--mg-color-secondary), var(--mg-color-primary);
  --mg-gradient-accent-stops: var(--mg-color-accent), var(--mg-color-primary);
}

/* =========================
   ACCESSIBILITY GUARDS
   Ensure base document settings don't undercut scaling
   ========================= */

html { 
  font-size: 100%; /* respect user/browser defaults */
}

body { 
  text-size-adjust: 100%; /* iOS/Android zoom friendliness */
  -webkit-text-size-adjust: 100%; /* WebKit mobile Safari compatibility */
}

/* =========================
   FORCE UNITLESS LINE-HEIGHTS
   Ensure all line-height values are unitless for better scaling
   Note: PHP code converts Elementor tokens to unitless values
   This CSS ensures any remaining values with units are normalized
   ========================= */

/* Normalize line-height values - CSS can't strip units, but we ensure unitless values are used */
/* The PHP conversion handles the actual unit stripping from Elementor tokens */
/* This rule ensures that when line-height is set via our CSS variables, it's treated as unitless */

/* =========================
   OFFER COMPONENT STYLES
   Styles for offer-related elements using design system tokens
   ========================= */

/* Offer Title - Background accent, white text */
p.offer-title {
	background: var(--e-global-color-accent);
	color: white;
}

/* Offer Deal - H3 font style, primary color, secondary border */
h2.offer-deal {
	font-family: var(--mg-font-h3-family);
	font-size: var(--mg-font-h3-size);
	font-weight: var(--mg-font-h3-weight);
	line-height: var(--mg-font-h3-line);
	letter-spacing: var(--mg-font-h3-track);
	color: var(--e-global-color-primary);
	border-bottom-color: var(--e-global-color-secondary);
	border-bottom-style: solid;
	border-bottom-width: 1px;
	padding: 1rem 0 2rem;
}

/* Offer CTA - Accent color, widget heading font style */
p.offer-cta {
	color: var(--e-global-color-accent);
	font-family: var(--mg-font-widget-heading-family);
	font-size: var(--mg-font-widget-heading-size);
	font-weight: var(--mg-font-widget-heading-weight);
	line-height: var(--mg-font-widget-heading-line);
	letter-spacing: var(--mg-font-widget-heading-track);
	padding-top: 2rem;
}

/* Offer Terms - Text/body color, body-small font style */
p.offer-terms {
	color: var(--e-global-color-text);
	font-family: var(--mg-font-body-small-family);
	font-size: var(--mg-font-body-small-size);
	font-weight: var(--mg-font-body-small-weight);
	line-height: var(--mg-font-body-small-line);
	letter-spacing: var(--mg-font-body-small-track);
}

/* Offer Logo - 80% width */
.offer-logo img {
	width: 80%;
}

/* Offer Address - Body/text color, small body font style */
p.offer-address {
	color: var(--e-global-color-text);
	font-family: var(--mg-font-body-small-family);
	font-size: var(--mg-font-body-small-size);
	font-weight: var(--mg-font-body-small-weight);
	line-height: var(--mg-font-body-small-line);
	letter-spacing: var(--mg-font-body-small-track);
}

/* Offer Footer Links - Accent color, body-small font style */
.offer-footer a {
	color: var(--e-global-color-accent);
	font-family: var(--mg-font-body-small-family);
	font-size: var(--mg-font-body-small-size);
	font-weight: var(--mg-font-body-small-weight);
	line-height: var(--mg-font-body-small-line);
	letter-spacing: var(--mg-font-body-small-track);
}

/* Offer Body - Primary color border */
.offer-body {
	border-color: var(--e-global-color-primary);
	border-style: dashed;
	border-width: 3px;
}

/* =========================
   PAGE CONTENT LIST STYLES
   Add bottom padding to lists in page content only
   ========================= */

/* Target lists in page content areas */
main ul,
main ol,
article ul,
article ol,
.entry-content ul,
.entry-content ol,
.post-content ul,
.post-content ol,
.page-content ul,
.page-content ol,
.elementor-post__content ul,
.elementor-post__content ol,
.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol {
  padding-bottom: 15px;
}

/* Exclude lists in headers, footers, and navigation menus */
header ul,
header ol,
footer ul,
footer ol,
.site-header ul,
.site-header ol,
.site-footer ul,
.site-footer ol,
.elementor-location-header ul,
.elementor-location-header ol,
.elementor-location-footer ul,
.elementor-location-footer ol,
nav ul,
nav ol,
.menu ul,
.menu ol,
.nav-menu ul,
.nav-menu ol,
.wp-block-navigation ul,
.wp-block-navigation ol,
.elementor-menu-toggle ul,
.elementor-menu-toggle ol {
  padding-bottom: revert;
}

/* =========================
   Container background CSS fixes applied via PHP hooks
   ========================= */