/* Typography System using WorkSans font family - Modern Design */

/* Base font styles - Using WorkSans from vars.css */
:root {
  /* Font Families */
  --font-family-heading: var(--heading-01-font-family, "WorkSans-SemiBold", sans-serif);
  --font-family-body: var(--body-regular-400-font-family, "WorkSans-Regular", sans-serif);
  --font-family-body-medium: var(--body-regular-500-font-family, "WorkSans-Medium", sans-serif);
  --font-family-body-semibold: var(--body-regular-600-font-family, "WorkSans-SemiBold", sans-serif);
  
  /* Font Sizes - Desktop */
  --font-size-display: var(--display-font-size, 64px);
  --font-size-h1: var(--heading-01-font-size, 48px);
  --font-size-h2: var(--heading-02-font-size, 38px);
  --font-size-h3: var(--heading-03-font-size, 32px);
  --font-size-h4: var(--heading-04-font-size, 24px);
  --font-size-h5: var(--heading-05-font-size, 20px);
  --font-size-body-lg: var(--body-large-400-font-size, 18px);
  --font-size-body: var(--body-regular-400-font-size, 16px);
  --font-size-body-sm: var(--body-small-400-font-size, 14px);
  --font-size-body-xs: var(--body-thin-400-font-size, 12px);
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.75;
}

/* Heading styles */
.typography-h1 {
  font-family: var(--font-family-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: var(--line-height-tight);
  text-align: left;
  color: var(--gray-900, #132238);
}

.typography-h2 {
  font-family: var(--font-family-heading);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: var(--line-height-snug);
  text-align: left;
  color: var(--gray-900, #132238);
}

.typography-h3 {
  font-family: var(--font-family-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  font-weight: 600;
  line-height: var(--line-height-snug);
  text-align: left;
  color: var(--gray-900, #132238);
}

.typography-h4 {
  font-family: var(--font-family-heading);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: var(--line-height-normal);
  text-align: left;
  color: var(--gray-900, #132238);
}

.typography-h5 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h5);
  font-weight: 600;
  line-height: var(--line-height-normal);
  text-align: left;
  color: var(--gray-900, #132238);
}

/* Paragraph styles */
.typography-p1 {
  font-family: var(--font-family-body);
  font-size: clamp(14px, 2.5vw, 18px);
  font-weight: 400;
  line-height: var(--line-height-relaxed);
  text-align: justify;
  color: var(--gray-700, #424e60);
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

.typography-p2 {
  font-family: var(--font-family-body);
  font-size: clamp(13px, 2.5vw, 16px);
  font-weight: 400;
  line-height: var(--line-height-relaxed);
  text-align: justify;
  color: var(--gray-600, #556070);
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

.typography-p3 {
  font-family: var(--font-family-body);
  font-size: clamp(12px, 2.5vw, 15px);
  font-weight: 400;
  line-height: var(--line-height-relaxed);
  text-align: justify;
  color: var(--gray-500, #697484);
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

.typography-p4 {
  font-family: var(--font-family-body);
  font-size: clamp(11px, 2vw, 14px);
  font-weight: 400;
  line-height: var(--line-height-relaxed);
  text-align: justify;
  color: var(--gray-400, #87909d);
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

/* Link styles */
.typography-link {
  font-family: var(--font-family-body-medium);
  font-size: inherit;
  font-weight: 500;
  color: var(--primary-500, #a53dff);
  text-decoration: none;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

.typography-link:hover {
  color: var(--primary-600, #8431cc);
  text-decoration: underline;
}

/* Label styles */
.typography-label {
  font-family: var(--font-family-body-medium);
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  line-height: var(--line-height-normal);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500, #697484);
}

/* Caption styles */
.typography-caption {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-xs);
  font-weight: 400;
  line-height: var(--line-height-normal);
  color: var(--gray-400, #87909d);
}

/* Button text styles */
.typography-button {
  font-family: var(--font-family-body-semibold);
  font-size: var(--font-size-body);
  font-weight: 600;
  line-height: var(--line-height-normal);
  letter-spacing: 0.25px;
}

/* Responsive typography adjustments */
@media screen and (max-width: 769px) {
  .typography-h1 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
  }
  
  .typography-h2 {
    font-size: clamp(1.375rem, 4vw, 2rem);
  }
  
  .typography-h3 {
    font-size: clamp(1.125rem, 3vw, 1.625rem);
  }
  
  .typography-h4 {
    font-size: clamp(1rem, 2.5vw, 1.375rem);
  }
  
  .typography-p1 {
    font-size: clamp(14px, 2.5vw, 16px);
  }
  
  .typography-p2 {
    font-size: clamp(13px, 2.5vw, 15px);
  }
  
  .typography-p3 {
    font-size: clamp(12px, 2.5vw, 14px);
  }
  
  .typography-p4 {
    font-size: clamp(11px, 2vw, 13px);
  }
}

@media screen and (max-width: 480px) {
  .typography-h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  
  .typography-h2 {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }
  
  .typography-h3 {
    font-size: clamp(1rem, 4vw, 1.5rem);
  }
  
  .typography-h4 {
    font-size: clamp(0.875rem, 3vw, 1.25rem);
  }
  
  .typography-p1 {
    font-size: clamp(13px, 2.5vw, 15px);
  }
  
  .typography-p2 {
    font-size: clamp(12px, 2.5vw, 14px);
  }
  
  .typography-p3 {
    font-size: clamp(11px, 2.5vw, 13px);
  }
  
  .typography-p4 {
    font-size: clamp(10px, 2vw, 12px);
  }
}