/* ========================================
   HERO SPLIT - GLOBAL TYPOGRAPHY
   Google Fonts - Poppins
   ======================================== */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* Global Font Stack & Size System */
:root {
  --font-family-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Standardized Font Sizes */
  --font-size-page-title: 1.5rem;    /* 24px - Main page titles (further reduced from 28px for optimal proportion) */
  --font-size-section-title: 1.375rem; /* 22px - Section titles (reduced to maintain hierarchy) */
  --font-size-card-title: 1.25rem;   /* 20px - Card/modal titles */
  --font-size-subtitle: 1.125rem;    /* 18px - Subtitles */
  --font-size-body: 1rem;            /* 16px - Body text */
  --font-size-small: 0.875rem;       /* 14px - Small text */
  --font-size-xs: 0.75rem;           /* 12px - Extra small */

  /* Line Heights */
  --line-height-tight: 1.25;      /* Increased from 1.1 to 1.25 for better readability */
  --line-height-normal: 1.2;
  --line-height-relaxed: 1.3;
  --line-height-loose: 1.5;

  /* Letter Spacing */
  --letter-spacing-tight: 0;      /* Removed negative letter-spacing for better readability */
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
}

/* Apply to all elements */
* {
  font-family: var(--font-family-primary);
}

/* Specific font weights */
.font-light { font-weight: var(--font-weight-light) !important; }
.font-regular { font-weight: var(--font-weight-regular) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }
.font-extrabold { font-weight: var(--font-weight-extrabold) !important; }

/* ========================================
   STANDARDIZED TYPOGRAPHY CLASSES
   ======================================== */

/* Page Titles - Main headings for each page */
.page-title {
  font-size: var(--font-size-page-title) !important;
  font-weight: var(--font-weight-semibold) !important;  /* Changed from bold (700) to semi-bold (600) */
  line-height: var(--line-height-tight) !important;
  letter-spacing: var(--letter-spacing-tight) !important;
  margin-bottom: 0.5rem !important;
  color: #1a202c;  /* Softer black for improved readability */
}

/* Section Titles - Major sections within pages */
.section-title {
  font-size: var(--font-size-section-title) !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: var(--line-height-normal) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
  margin-bottom: 1rem !important;
  color: #111827;
}

/* Card Titles - Headings for cards and modals */
.card-title {
  font-size: var(--font-size-card-title) !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: var(--line-height-normal) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
  /* margin-bottom: 0.5rem !important; */
  color: #111827;
}

/* Subtitles - Secondary headings */
.subtitle {
  font-size: var(--font-size-subtitle) !important;
  font-weight: var(--font-weight-medium) !important;
  line-height: var(--line-height-relaxed) !important;
  letter-spacing: var(--letter-spacing-normal) !important;
  /* margin-bottom: 0.25rem !important; */
  color: #374151;
}

/* Common typography classes (keeping for backward compatibility) */
.text-hero {
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
}

.text-heading {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
}

.text-subheading {
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-relaxed);
}

.text-body {
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-loose);
}

.text-small {
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
}

/* ========================================
   RESPONSIVE TYPOGRAPHY
   ======================================== */

/* Mobile adjustments */
@media (max-width: 768px) {
  .page-title {
    font-size: 1.375rem !important; /* 22px - scaled down for mobile */
  }

  .section-title {
    font-size: 1.25rem !important; /* 20px */
  }

  .card-title {
    font-size: 1.125rem !important; /* 18px */
  }

  .subtitle {
    font-size: 1rem !important; /* 16px */
  }
}

/* Small mobile adjustments */
@media (max-width: 576px) {
  .page-title {
    font-size: 1.25rem !important; /* 20px - further scaled down for small mobile */
  }

  .section-title {
    font-size: 1.125rem !important; /* 18px */
  }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Text size utilities */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-small) !important; }
.text-base { font-size: var(--font-size-body) !important; }
.text-lg { font-size: var(--font-size-subtitle) !important; }
.text-xl { font-size: var(--font-size-card-title) !important; }
.text-2xl { font-size: var(--font-size-section-title) !important; }
.text-3xl { font-size: var(--font-size-page-title) !important; }

/* Override Bootstrap heading utilities to use our system */
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

/* Specific heading overrides */
.h1 { font-size: var(--font-size-page-title) !important; font-weight: var(--font-weight-semibold) !important; }
.h2 { font-size: var(--font-size-section-title) !important; }
.h3 { font-size: var(--font-size-card-title) !important; }
.h4 { font-size: var(--font-size-subtitle) !important; font-weight: var(--font-weight-medium) !important; }
.h5 { font-size: var(--font-size-body) !important; font-weight: var(--font-weight-medium) !important; }
.h6 { font-size: var(--font-size-small) !important; }

/* Remove margins when needed */
.mb-0-important { margin-bottom: 0 !important; }

/* ========================================
   COMPONENT-SPECIFIC TYPOGRAPHY
   ======================================== */

/* Welcome section titles */
.welcome-title {
  font-size: var(--font-size-subtitle) !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: 0.2px !important;
  margin-bottom: 0.5rem !important;
}

.welcome-subtitle {
  font-size: var(--font-size-body) !important;
  font-weight: var(--font-weight-medium) !important;
  letter-spacing: 0.2px !important;
  margin-bottom: 0.25rem !important;
}

/* Modal titles */
.modal-title {
  font-size: var(--font-size-card-title) !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: var(--line-height-normal) !important;
}

/* Offcanvas titles */
.offcanvas-title {
  font-size: var(--font-size-card-title) !important;
  font-weight: var(--font-weight-semibold) !important;
}

/* Badge text */
.badge {
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-medium) !important;
  letter-spacing: 0.02em !important;
}