/* Bio Sans Font Implementation
 * 
 * IMPORTANT: To use the actual Bio Sans font, you need to:
 * 1. Obtain the Bio Sans font files (.woff2, .woff, .ttf)
 * 2. Place them in frontend/public/fonts/ directory
 * 3. Update the src paths below to point to your font files
 * 
 * Current implementation uses system fallbacks that closely match Bio Sans characteristics
 */

/* Bio Sans Regular */
@font-face {
  font-family: 'Bio Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Replace with actual Bio Sans font files when available */
  src: local('Arial'), 
       local('Helvetica Neue'), 
       local('Helvetica'), 
       local('system-ui'),
       local('sans-serif');
}

/* Bio Sans Bold */
@font-face {
  font-family: 'Bio Sans';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  /* Replace with actual Bio Sans Bold font files when available */
  src: local('Arial Bold'), 
       local('Helvetica Neue Bold'), 
       local('Helvetica Bold'), 
       local('system-ui'),
       local('sans-serif');
}

/* 
 * To implement actual Bio Sans fonts, replace the @font-face declarations above with:
 * 
 * @font-face {
 *   font-family: 'Bio Sans';
 *   font-weight: 400;
 *   font-style: normal;
 *   font-display: swap;
 *   src: url('/fonts/BioSans-Regular.woff2') format('woff2'),
 *        url('/fonts/BioSans-Regular.woff') format('woff'),
 *        url('/fonts/BioSans-Regular.ttf') format('truetype');
 * }
 * 
 * @font-face {
 *   font-family: 'Bio Sans';
 *   font-weight: 700;
 *   font-style: normal;
 *   font-display: swap;
 *   src: url('/fonts/BioSans-Bold.woff2') format('woff2'),
 *        url('/fonts/BioSans-Bold.woff') format('woff'),
 *        url('/fonts/BioSans-Bold.ttf') format('truetype');
 * }
 */

/* Font Loading Optimization */
.bio-sans-loading {
  font-family: Arial, Helvetica, sans-serif;
}

.bio-sans-loaded {
  font-family: "Bio Sans", Arial, Helvetica, sans-serif;
}

/* Typography Scale with Bio Sans */
.display-1 {
  font-family: "Bio Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 4rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.display-2 {
  font-family: "Bio Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.heading-1 {
  font-family: "Bio Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.2;
}

.heading-2 {
  font-family: "Bio Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.3;
}

.heading-3 {
  font-family: "Bio Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.4;
}

.heading-4 {
  font-family: "Bio Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.4;
}

.body-large {
  font-family: "Bio Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.6;
}

.body-regular {
  font-family: "Bio Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
}

.body-small {
  font-family: "Bio Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5;
}

.caption {
  font-family: "Bio Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Button Typography */
.btn-text {
  font-family: "Bio Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.btn-text-small {
  font-family: "Bio Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* Form Typography */
.label-text {
  font-family: "Bio Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.4;
}

.input-text {
  font-family: "Bio Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
}

.helper-text {
  font-family: "Bio Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.4;
}

.error-text {
  font-family: "Bio Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.4;
}