/* Typography System */

/* Hero Title - From join-now.blade.php */
.hero-title,
.join-sec-content h1 {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-hero);
  line-height: var(--line-height-tight);
  color: var(--black);
}

/* Page Title - General page titles */
.page-title {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-title);
  text-align: center;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--gray-light);
}

/* Section Title - For main sections */
.section-title {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-subtitle);
  color: #313131;
  margin-bottom: var(--spacing-md);
}

/* Subtitle - From registration flow */
.subtitle,
.title-col h5 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-large);
  line-height: var(--line-height-tight);
}

/* Base Text */
.text-base {
  font-family: var(--font-primary);
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

/* Lead Text */
.text-lead {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
}

/* Small Text */
.text-small {
  font-family: var(--font-primary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
}

/* Placeholder text styling */
.form-control::placeholder,
input::placeholder {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-medium);
  color: #000000b3;
}

/* Responsive Typography */
@media (max-width: 480px) {
  .hero-title,
  .join-sec-content h1 {
    font-size: var(--font-size-title) !important;
  }
  
  .page-title,
  .title-col h2 {
    font-size: var(--font-size-section) !important;
  }
  
  .subtitle,
  .title-col h5 {
    font-size: var(--font-size-small) !important;
  }
}