/* 
 * RB Typography System
 * A comprehensive responsive typography system with predefined classes
 * Breakpoints: Desktop (default), Tablet (max-width: 1024px), Mobile (max-width: 767px)
 */

:root {
  /* Base font sizes */
  --rb-base-size: 16px;
  --rb-line-height: 1.5;
  
  /* Font weights */
  --rb-weight-regular: 400;
  --rb-weight-medium: 500;
  --rb-weight-semibold: 600;
  --rb-weight-bold: 700;
  
  /* Font families */
  --rb-font-primary:  'Source Sans 3', sans-serif !important;
  --rb-font-secondary:  'Source Sans 3', sans-serif !important;
  --rb-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  
  /* Text colors */
  --rb-text-primary: #1a1a1a;
  --rb-text-secondary: #555555;
  --rb-text-tertiary: #777777;
}

/* 
 * Header styles
 * Desktop (default) sizes
 */

.rb-homepage-hero-title{
  
}

.rb-header-one {
  font-size: 44px;         
  line-height: 1.2;
  font-weight: var(--rb-weight-bold);
}

.rb-header-two {
  font-size: 38px !important;          
  line-height: 1.25;
  font-weight: var(--rb-weight-bold);

}

.rb-header-three {
  font-size: 32px;          
  line-height: 1.3;
  font-weight: var(--rb-weight-semibold);
  letter-spacing: -0.72px;
}

.rb-header-four {
  font-size: 22px;          
  line-height: 1.3;
  font-weight: var(--rb-weight-semibold);
  letter-spacing: -0.72px;
}

.rb-header-five {
  font-size: 1.25rem;     
  line-height: 1.4;
  font-weight: var(--rb-weight-medium);
}

.rb-header-six {
  font-size: 1rem;          
  line-height: 1.45;
  font-weight: var(--rb-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 
 * Body text styles
 */
.rb-body-large {
  font-size: 20px;      
  line-height: 1.6;
}

.rb-body {
  font-size: 16px;          /* 16px */
  line-height: 1.5;
}

.rb-body-small {
  font-size: 0.875rem;      /* 14px */
  line-height: 1.5;
}

.rb-caption {
  font-size: 0.75rem;       /* 12px */
  line-height: 1.4;
  color: var(--rb-text-tertiary);
}

/* 
 * Special text styles
 */
.rb-lead {
  font-size: 1.25rem;       /* 20px */
  line-height: 1.6;
  font-weight: var(--rb-weight-regular);
  margin-bottom: 1.5rem;
}

.rb-quote {
  font-family: var(--rb-font-secondary);
  font-size: 1.5rem;        /* 24px */
  line-height: 1.5;
  font-style: italic;
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 4px solid #e0e0e0;
}

.rb-code {
  font-family: var(--rb-font-mono);
  font-size: 0.9375rem;     /* 15px */
  line-height: 1.6;
  background-color: #f5f5f5;
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

/* 
 * Utility classes
 */
.rb-text-center {
  text-align: center;
}

.rb-text-right {
  text-align: right;
}

.rb-text-justify {
  text-align: justify;
}

.rb-text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rb-text-capitalize {
  text-transform: capitalize;
}

.rb-text-primary {
  color: var(--rb-text-primary);
}

.rb-text-secondary {
  color: var(--rb-text-secondary);
}

.rb-text-tertiary {
  color: var(--rb-text-tertiary);
}

/* 
 * Responsive typography
 * Tablet (max-width: 1024px)
 */
@media (max-width: 1024px) {
  .rb-header-one {
    font-size: 2.5rem;      /* 40px */
  }
  
  .rb-header-two {
    font-size: 28px !important;    
  }
  
  .rb-header-three {
    font-size: 40px !important;     
  }
  
  .rb-header-four {
    font-size: 1.375rem;    /* 22px */
  }
  
  .rb-header-five {
    font-size: 1.125rem;    /* 18px */
  }
  
  .rb-lead {
    font-size: 1.125rem;    /* 18px */
  }
  
  .rb-quote {
    font-size: 1.375rem;    /* 22px */
  }
}

/* 
 * Responsive typography
 * Mobile (max-width: 767px)
 */
@media (max-width: 767px) {
  .rb-header-one {
    font-size: 2rem;        /* 32px */
  }
  
  .rb-header-two {
    font-size: 28px !important;   
  }
  
  .rb-header-three {
    font-size: 28px !important;      
  }
  
  .rb-header-four {
    font-size: 1.25rem;     /* 20px */
  }
  
  .rb-header-five {
    font-size: 1.125rem;    /* 18px */
  }
  
  .rb-header-six {
    font-size: 1rem;        /* 16px */
  }
  
  .rb-body-large {
    font-size: 1rem;        /* 16px */
  }
  
  .rb-body {
    font-size: 0.9375rem;   /* 15px */
  }
  
  .rb-lead {
    font-size: 1.125rem;    /* 18px */
  }
  
  .rb-quote {
    font-size: 1.25rem;     /* 20px */

  }
}