: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:    "Open Sans", sans-serif;
  --font-heading: "Roboto", sans-serif;

  /* Tier 2 — Per-element (cascade up to masters; HubL element value is deepest fallback) */
  --font-h1:               var(--font-heading, "Roboto", sans-serif);
  --font-h2:               var(--font-heading, "Roboto", sans-serif);
  --font-h3:               var(--font-heading, "Roboto", sans-serif);
  --font-h4:               var(--font-heading, "Roboto", sans-serif);
  --font-h5:               var(--font-heading, "Roboto", sans-serif);
  --font-h6:               var(--font-heading, "Roboto", sans-serif);
  --font-body-base:        var(--font-body,    "Open Sans", sans-serif);
  --font-link:             var(--font-body,    "Open Sans", sans-serif);
  --font-button-primary:   var(--font-body,    "Roboto", sans-serif);
  --font-button-secondary: var(--font-body,    "Open Sans", sans-serif);
  --font-button-tertiary:  var(--font-body,    "Open Sans", sans-serif);
  --font-button-quartenary:var(--font-body,    "Open Sans", sans-serif);
  --font-form-title:       var(--font-heading, "Roboto", );
  --font-form-input:       var(--font-body);
  --font-form-button:      var(--font-body,    "Open Sans", 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: #5b6770;
  --body-line-height: 140%;
  --body-letter-spacing: 0em;
  --body-mobile-size: 16px;
  --body-margin-top: 0px;
  --body-margin-bottom: 16px;
  --body-mobile-margin-top: 0px;
  --body-mobile-margin-bottom: 16px;

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

  /* H1 */
  --h1-size: 80px;
  --h1-color: #195e47;
  --h1-transform: none;
  --h1-line-height: 100%;
  --h1-letter-spacing: 0em;
  --h1-mobile-size: 50px;
  --h1-margin-top: 0px;
  --h1-margin-bottom: 22px;
  --h1-mobile-margin-top: 0px;
  --h1-mobile-margin-bottom: 22px;

  /* H2 */
  --h2-size: 58px;
  --h2-color: #082e1b;
  --h2-transform: none;
  --h2-line-height: 100%;
  --h2-letter-spacing: 0em;
  --h2-mobile-size: 40px;
  --h2-margin-top: 0px;
  --h2-margin-bottom: 22px;
  --h2-mobile-margin-top: 0px;
  --h2-mobile-margin-bottom: 22px;

  /* H3 */
  --h3-size: 50px;
  --h3-color: #195e47;
  --h3-transform: none;
  --h3-line-height: 100%;
  --h3-letter-spacing: 0em;
  --h3-mobile-size: 34px;
  --h3-margin-top: 0px;
  --h3-margin-bottom: 22px;
  --h3-mobile-margin-top: 0px;
  --h3-mobile-margin-bottom: 22px;

  /* H4 */
  --h4-size: 24px;
  --h4-color: #195e47;
  --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: #195e47;
  --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: #195e47;
  --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: 16px;
  --form-label-weight: bold;
  --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: 14px;
  --form-textarea-height: 150px;
  --form-focus-border-color: #000000;
  --color-error: #EF6B51;
  /* ==============================================
     SECONDARY BUTTON
     ============================================== */
  --btn-secondary-color: #195e47;
  --btn-secondary-bg: 

  
  
    
  


  rgba(255, 255, 255, 0.0)

;
  --btn-secondary-border-top: 2px solid #195e47;
  --btn-secondary-border-right: 2px solid #195e47;
  --btn-secondary-border-bottom: 2px solid #195e47;
  --btn-secondary-border-left: 2px solid #195e47;
  --btn-secondary-radius: 6px;
  --btn-secondary-hover-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
  --btn-secondary-hover-bg: 

  
  
    
  


  rgba(25, 94, 71, 1.0)

;

  /* ==============================================
     TERTIARY BUTTON
     ============================================== */
  --btn-tertiary-color: #195e47;
  --btn-tertiary-bg: 

  
  
    
  


  rgba(255, 255, 255, 0.0)

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

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
  --btn-tertiary-hover-bg: 

  
  
    
  


  rgba(25, 94, 71, 1.0)

;

  /* ==============================================
     QUARTENARY BUTTON
     ============================================== */
  --btn-quartenary-color: #195e47;
  --btn-quartenary-bg: 

  
  
    
  


  rgba(255, 255, 255, 0.0)

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

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
  --btn-quartenary-hover-bg: 

  
  
    
  


  rgba(25, 94, 71, 1.0)

;

  /* ==============================================
     LINKS
     ============================================== */
  --link-color: #195e47;
  --link-hover: #00361f;
  --link-active: #41866f;
}

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

h1, .h1 {
  font-family: Roboto, sans-serif; font-style: normal; font-weight: 700; text-decoration: none
  font-family: var(--font-h1); /* MUST stay after  */
}

h2, .h2 {
  font-family: Roboto, sans-serif; font-style: normal; font-weight: 700; text-decoration: none
  font-family: var(--font-h2); /* MUST stay after  */
}

h3, .h3 {
  font-family: Roboto, sans-serif; font-style: normal; font-weight: 700; text-decoration: none
  font-family: var(--font-h3); /* MUST stay after  */
}

h4, .h4 {
  font-family: Roboto, sans-serif; font-style: normal; font-weight: 700; text-decoration: none
  font-family: var(--font-h4); /* MUST stay after  */
}

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

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

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