:root {
  /* ==============================================
     FONTS (Families)
     ============================================== */
  /* ==============================================
     FONT FAMILY VAR CHAIN
     Tier 1: master vars (HubL-resolved from theme.global_fonts).
     Tier 2: per-element vars cascade up to masters; deepest fallback
             is the per-element HubL value, preserving today's behavior
             when no override is set.
     Tier 3: legacy aliases keep existing Tailwind utilities working.
     Override surface: css/custom-css/fonts.css (typically only Tier 1
     needs setting; Tier 2 for per-element exceptions).
     ============================================== */

  /* Tier 1 — Masters */
  --font-body:    "Google Sans Flex", sans-serif;
  --font-heading: "Google Sans Flex", serif;

  /* Tier 2 — Per-element (cascade up to masters; HubL element value is deepest fallback) */
  --font-h1:               var(--font-heading, "Google Sans Flex", serif);
  --font-h2:               var(--font-heading, "Google Sans Flex", serif);
  --font-h3:               var(--font-heading, "Google Sans Flex", serif);
  --font-h4:               var(--font-heading, "Google Sans Flex", serif);
  --font-h5:               var(--font-heading, "Google Sans Flex", serif);
  --font-h6:               var(--font-heading, "Google Sans Flex", serif);
  --font-body-base:        var(--font-body,    "Google Sans Flex", sans-serif);
  --font-link:             var(--font-body,    "Google Sans Flex", sans-serif);
  --font-button-primary:   var(--font-body,    "Google Sans Flex", sans-serif);
  --font-button-secondary: var(--font-body,    "Google Sans Flex", sans-serif);
  --font-button-tertiary:  var(--font-body,    "Google Sans Flex", sans-serif);
  --font-button-quartenary:var(--font-body,    "Google Sans Flex", sans-serif);
  --font-form-title:       var(--font-heading, "Google Sans Flex", );
  --font-form-input:       var(--font-body);
  --font-form-button:      var(--font-body,    "Google Sans Flex", sans-serif);
  --font-nav:              var(--font-body);
  --font-footer:           var(--font-body);

  /* Tier 3 — Tailwind back-compat aliases (do not reverse direction; see implementation prompt) */
  --font-primary:   var(--font-body);
  --font-secondary: var(--font-heading);

  /* ==============================================
     BODY
     ============================================== */
  --body-size: 18px;
  --body-color: #050a27;
  --body-line-height: 160%;
  --body-letter-spacing: 0em;
  --body-mobile-size: 16px;
  --body-margin-top: 0px;
  --body-margin-bottom: 22px;
  --body-mobile-margin-top: 0px;
  --body-mobile-margin-bottom: 22px;

  /* ==============================================
     HEADINGS (H1 - H6)
     ============================================== */

  /* H1 */
  --h1-size: 48px;
  --h1-color: #050a27;
  --h1-transform: none;
  --h1-line-height: 120%;
  --h1-letter-spacing: 0em;
  --h1-mobile-size: 40px;
  --h1-margin-top: 0px;
  --h1-margin-bottom: 22px;
  --h1-mobile-margin-top: 0px;
  --h1-mobile-margin-bottom: 22px;

  /* H2 */
  --h2-size: 40px;
  --h2-color: #050a27;
  --h2-transform: none;
  --h2-line-height: 120%;
  --h2-letter-spacing: 0em;
  --h2-mobile-size: 34px;
  --h2-margin-top: 0px;
  --h2-margin-bottom: 22px;
  --h2-mobile-margin-top: 0px;
  --h2-mobile-margin-bottom: 22px;

  /* H3 */
  --h3-size: 30px;
  --h3-color: #050a27;
  --h3-transform: none;
  --h3-line-height: 120%;
  --h3-letter-spacing: 0em;
  --h3-mobile-size: 24px;
  --h3-margin-top: 0px;
  --h3-margin-bottom: 22px;
  --h3-mobile-margin-top: 0px;
  --h3-mobile-margin-bottom: 22px;

  /* H4 */
  --h4-size: 24px;
  --h4-color: #050a27;
  --h4-transform: none;
  --h4-line-height: 120%;
  --h4-letter-spacing: 0em;
  --h4-mobile-size: 20px;
  --h4-margin-top: 0px;
  --h4-margin-bottom: 22px;
  --h4-mobile-margin-top: 0px;
  --h4-mobile-margin-bottom: 22px;

  /* H5 */
  --h5-size: 16px;
  --h5-color: #050a27;
  --h5-transform: none;
  --h5-line-height: 140%;
  --h5-letter-spacing: 0em;
  --h5-mobile-size: 16px;
  --h5-margin-top: 0px;
  --h5-margin-bottom: 22px;
  --h5-mobile-margin-top: 0px;
  --h5-mobile-margin-bottom: 22px;

  /* H6 */
  --h6-size: 14px;
  --h6-color: #050a27;
  --h6-transform: none;
  --h6-line-height: 140%;
  --h6-letter-spacing: 0em;
  --h6-mobile-size: 14px;
  --h6-margin-top: 0px;
  --h6-margin-bottom: 22px;
  --h6-mobile-margin-top: 0px;
  --h6-mobile-margin-bottom: 22px;

  /* ==============================================
     LINKS
     ============================================== */
  /* ==============================================
     FORMS
     ============================================== */
  --form-label-size: 18px;
  --form-label-weight: normal;
  --form-field-margin-top: 0px;
  --form-field-spacing: 22px;
  --form-field-padding-top: 11px;
  --form-field-padding-right: 11px;
  --form-field-padding-bottom: 11px;
  --form-field-padding-left: 11px;
  --form-field-mobile-padding-top: 11px;
  --form-field-mobile-padding-right: 11px;
  --form-field-mobile-padding-bottom: 11px;
  --form-field-mobile-padding-left: 11px;
  --form-field-font-size: 16px;
  --form-field-mobile-font-size: 16px;
  --form-textarea-height: 150px;
  --form-focus-border-color: #050a27;
  --color-error: #EF6B51;
  /* ==============================================
     SECONDARY BUTTON
     ============================================== */
  --btn-secondary-color: #333333;
  --btn-secondary-bg: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
  --btn-secondary-border-top: 1px solid #333333;
  --btn-secondary-border-right: 1px solid #333333;
  --btn-secondary-border-bottom: 1px solid #333333;
  --btn-secondary-border-left: 1px solid #333333;
  --btn-secondary-radius: 8px;
  --btn-secondary-hover-color: 

  
  
    
  


  rgba(51, 51, 51, 1.0)

;
  --btn-secondary-hover-bg: 

  
  
    
  


  rgba(214, 214, 214, 1.0)

;

  /* ==============================================
     TERTIARY BUTTON
     ============================================== */
  --btn-tertiary-color: #050a27;
  --btn-tertiary-bg: 

  
  
    
  


  rgba(255, 255, 255, 0.0)

;
  --btn-tertiary-border-top: 2px solid #050a27;
  --btn-tertiary-border-right: 2px solid #050a27;
  --btn-tertiary-border-bottom: 2px solid #050a27;
  --btn-tertiary-border-left: 2px solid #050a27;
  --btn-tertiary-radius: 6px;
  --btn-tertiary-hover-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
  --btn-tertiary-hover-bg: 

  
  
    
  


  rgba(5, 10, 39, 1.0)

;

  /* ==============================================
     QUARTENARY BUTTON
     ============================================== */
  --btn-quartenary-color: #050a27;
  --btn-quartenary-bg: 

  
  
    
  


  rgba(255, 255, 255, 0.0)

;
  --btn-quartenary-border-top: 2px solid #050a27;
  --btn-quartenary-border-right: 2px solid #050a27;
  --btn-quartenary-border-bottom: 2px solid #050a27;
  --btn-quartenary-border-left: 2px solid #050a27;
  --btn-quartenary-radius: 6px;
  --btn-quartenary-hover-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
  --btn-quartenary-hover-bg: 

  
  
    
  


  rgba(5, 10, 39, 1.0)

;

  /* ==============================================
     LINKS
     ============================================== */
  --link-color: #0270E0;
  --link-hover: #0048b8;
  --link-active: #2a98ff;
}

body {
  font-family: 'Google Sans Flex', sans-serif; font-style: normal; font-weight: normal; text-decoration: none
  font-family: var(--font-body-base); /* MUST stay after  */
}

h1, .h1 {
  font-weight: 400; text-decoration: none; font-family: 'Google Sans Flex', serif; font-style: normal
  font-family: var(--font-h1); /* MUST stay after  */
}

h2, .h2 {
  font-weight: 400; text-decoration: none; font-family: 'Google Sans Flex', serif; font-style: normal
  font-family: var(--font-h2); /* MUST stay after  */
}

h3, .h3 {
  font-weight: 400; text-decoration: none; font-family: 'Google Sans Flex', serif; font-style: normal
  font-family: var(--font-h3); /* MUST stay after  */
}

h4, .h4 {
  font-weight: 500; text-decoration: none; font-family: 'Google Sans Flex', serif; font-style: normal
  font-family: var(--font-h4); /* MUST stay after  */
}

h5, .h5 {
  font-weight: normal; text-decoration: none; font-family: 'Google Sans Flex', serif; font-style: normal
  font-family: var(--font-h5); /* MUST stay after  */
}

h6, .h6 {
  font-weight: normal; text-decoration: none; font-family: 'Google Sans Flex', serif; font-style: normal
  font-family: var(--font-h6); /* MUST stay after  */
}

a {
  font-weight: normal; text-decoration: underline; font-family: 'Google Sans Flex', sans-serif; font-style: normal
  font-family: var(--font-link); /* MUST stay after  */
}