/* Base Typography System */

html{
    font-size: 92.5%;
}

/* Text size utilities with line-height */
.text-sm {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.25rem !important; /* 20px, ~143% */
  }
  
  .text-base {
    font-size: 1rem !important; /* 16px */
    line-height: 1.5rem !important; /* 24px, 150% */
  }
  
  .text-lg {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.75rem !important; /* 28px, ~156% */
  }
  
  .text-xl {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.75rem !important; /* 28px, 140% */
  }
  
  .text-2xl {
    font-size: 1.5rem !important; /* 24px */
    line-height: 2rem !important; /* 32px, ~133% */
  }
  
  .text-3xl {
    font-size: 1.875rem !important; /* 30px */
    line-height: 2.25rem !important; /* 36px, 120% */
  }
  
  .text-4xl {
    font-size: 2.25rem !important; /* 36px */
    line-height: 2.5rem !important; /* 40px, ~111% */
  }
  
  .text-5xl {
    font-size: 3rem !important; /* 48px */
    line-height: 1.1 !important; /* 52.8px, 110% */
  }
  
  /* Responsive Typography - Mobile First Approach */
  /* Default is mobile (<640px) */
  
  /* All Headings */
  h1, .heading-h1 {
    font-size: 1.875rem !important; /* text-3xl (30px) */
    line-height: 2.25rem !important; /* 36px, 120% */
    font-family: 'hkgrotesk', sans-serif;
  }
  
  h2, .heading-h2 {
    font-size: 1.5rem !important; /* text-2xl (24px) */
    line-height: 2rem !important; /* 32px, ~133% */
    font-family: 'hkgrotesk', sans-serif;
  }
  
  h3, .heading-h3 {
    font-size: 1.25rem !important; /* text-xl (20px) */
    line-height: 1.75rem !important; /* 28px, 140% */
    font-family: 'hkgrotesk', sans-serif;
  }
  
  h4, .heading-h4 {
    font-size: 1.5rem !important; /* text-lg (18px) */
    line-height: 1.75rem !important; /* 28px, ~156% */
    font-family: 'hkgrotesk', sans-serif;
  }
  
  h5, .heading-h5 {
    font-size: 1rem !important; /* text-base (16px) */
    line-height: 1.5rem !important; /* 24px, 150% */
    font-family: 'hkgrotesk', sans-serif;
  }
  
  h6, .heading-h6 {
    font-size: 0.875rem !important; /* text-sm (14px) */
    line-height: 1.25rem !important; /* 20px, ~143% */
    font-family: 'hkgrotesk', sans-serif;
  }
  
  /* Links */
  a, .link {
    font-size: 0.875rem !important; /* text-sm (14px) */
    line-height: 1.25rem !important; /* 20px, ~143% */
    text-decoration: none !important;
  }
  /* a:hover, .link:hover {
    color: unset !important;
  } */
  
  /* Lists */
  ul, .unordered-list {
    margin-top: 0.75rem !important; /* 12px */
    margin-bottom: 0.75rem !important; /* 12px */
  }
  
  li, .list-item {
    font-size: 0.875rem !important; /* text-sm (14px) */
    line-height: 1.25rem !important; /* 20px, ~143% */
    margin-bottom: 0.5rem !important; /* 8px spacing between items */
  }
  
  .tagline {
    font-size: 1.25rem !important; /* text-xl (20px) */
    line-height: 1.75rem !important; /* 28px, 140% */
  }
  
  .subline {
    font-size: 1rem !important; /* text-base (16px) */
    line-height: 1.5rem !important; /* 24px, 150% */
  }
  
  .content-paragraph {
    font-size: 1rem !important; /* text-sm (14px) */
    line-height: 1.25rem !important; /* 20px, ~143% */
  }
  
  .button {
    font-size: 0.875rem !important; /* text-sm (14px) */
    line-height: 1.25rem !important; /* 20px, ~143% */
    text-decoration: none !important;
  }
  
  /* Tablet (≥640px) */
  @media (min-width: 40rem) { /* 640px */
    h1, .heading-h1 {
      font-size: 2.25rem !important; /* text-4xl (36px) */
      line-height: 2.5rem !important; /* 40px, ~111% */
    }
    
    h2, .heading-h2 {
      font-size: 1.875rem !important; /* text-3xl (30px) */
      line-height: 2.25rem !important; /* 36px, 120% */
    }
    
    h3, .heading-h3 {
      font-size: 1.5rem !important; /* text-2xl (24px) */
      line-height: 2rem !important; /* 32px, ~133% */
    }
    
    h4, .heading-h4 {
      font-size: 1.25rem !important; /* text-xl (20px) */
      line-height: 1.75rem !important; /* 28px, 140% */
    }
    
    h5, .heading-h5 {
      font-size: 1rem !important; /* text-lg (18px) */
      line-height: 1.5rem !important; /* 28px, ~156% */
    }
    
    h6, .heading-h6 {
      font-size: 1rem !important; /* text-base (16px) */
      line-height: 1.5rem !important; /* 24px, 150% */
    }
  
    /* Links */
    a, .link {
      font-size: 1rem !important; /* text-base (16px) */
      line-height: 1.5rem !important; /* 24px, 150% */
    }
  
   
    li, .list-item {
      font-size: 1rem !important; /* text-base (16px) */
      line-height: 1.5rem !important; /* 24px, 150% */
    }
  
    .tagline {
      font-size: 1.5rem !important; /* text-2xl (24px) */
      line-height: 2rem !important; /* 32px, ~133% */
    }
  
    .subline {
      font-size: 1.125rem !important; /* text-lg (18px) */
      line-height: 1.75rem !important; /* 28px, ~156% */
    }
  
    .content-paragraph {
      font-size: 1rem !important; /* text-base (16px) */
      line-height: 1.5rem !important; /* 24px, 150% */
    }
  
    .button {
      font-size: 0.875rem !important; /* text-sm (14px) (unchanged) */
      line-height: 1.25rem !important; /* 20px, ~143% */
    }
  }
  
  /* Desktop (≥1024px) */
  @media (min-width: 64rem) { /* 1024px */
    h1, .heading-h1 {
      font-size: 3rem !important; /* text-5xl (48px) */
      line-height: 1.1 !important; /* 52.8px, 110% */
    }
    
    h2, .heading-h2 {
      font-size: 2.25rem !important; /* text-4xl (36px) */
      line-height: 2.5rem !important; /* 40px, ~111% */
    }
    
    h3, .heading-h3 {
      font-size: 1.875rem !important; /* text-3xl (30px) */
      line-height: 2.25rem !important; /* 36px, 120% */
    }
    
    h4, .heading-h4 {
      font-size: 1.5rem !important; /* text-2xl (24px) */
      line-height: 2rem !important; /* 32px, ~133% */
    }
    
    h5, .heading-h5 {
      font-size: 1rem !important; /* text-xl (20px) */
      line-height: 1.5rem !important; /* 28px, 140% */
    }
    
    h6, .heading-h6 {
      font-size: 1.125rem !important; /* text-lg (18px) */
      line-height: 1.75rem !important; /* 28px, ~156% */
    }
  
    /* Links */
    a, .link {
      font-size: 1.125rem !important; /* text-lg (18px) */
      line-height: 1.75rem !important; /* 28px, ~156% */
    }
  
   
    li, .list-item {
      font-size: 1.125rem !important; /* text-lg (18px) */
      line-height: 1.75rem !important; /* 28px, ~156% */
    }
  
    .tagline {
      font-size: 1.875rem !important; /* text-3xl (30px) */
      line-height: 2.25rem !important; /* 36px, 120% */
    }
  
    .subline {
      font-size: 1.25rem !important; /* text-xl (20px) */
      line-height: 1.75rem !important; /* 28px, 140% */
    }
  
    .content-paragraph {
      font-size: 1.125rem !important; /* text-lg (18px) */
      line-height: 1.75rem !important; /* 28px, ~156% */
    }
  
    .button {
      font-size: 1rem !important; /* text-base (16px) */
      line-height: 1.5rem !important; /* 24px, 150% */
    }
  }