@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@600;700&display=swap');

/* --- Professional Typography System --- */

/* 1. Apply the body font and set a baseline for readability */
body {
    font-family: 'Lato', sans-serif;
    font-size: 1rem; /* Typically 16px */
    line-height: 1.6;
    color: #333; /* A softer black for better reading comfort */
}

/* 2. Apply the heading font to all heading levels */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; /* Bolder weight for primary headings */
}

/* 3. Create a clear visual hierarchy for headings */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 {
    font-size: 1.5rem;
    font-weight: 600; /* A slightly lighter weight for sub-headings */
}
h5 {
    font-size: 1.25rem;
    font-weight: 600;
}
h6 {
    font-size: 1rem;
    font-weight: 600;
}

/* 4. Ensure bold text uses the correct font weight */
strong, b {
    font-weight: 700; /* Use the bold weight of Lato */
}

/* 5. Enhance links for better accessibility and consistency */
a {
    font-family: 'Lato', sans-serif;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    text-decoration: underline;
}

/* 6. Style buttons to complement the typography */
.btn {
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    letter-spacing: 0.025em;
}

/* 7. Navigation typography */
.navbar-brand {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.nav-link {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
}

/* 8. Card and component typography */
.card-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.badge {
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    letter-spacing: 0.025em;
}

/* 9. Form elements */
.form-label {
    font-family: 'Lato', sans-serif;
    font-weight: 600;
}

.form-control, .form-select {
    font-family: 'Lato', sans-serif;
}

/* 10. Lead text styling */
.lead {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.7;
}

/* 11. Breadcrumb styling */
.breadcrumb-item {
    font-family: 'Lato', sans-serif;
    font-size: 0.875rem;
}

/* 12. Small text elements */
.small, small {
    font-family: 'Lato', sans-serif;
    font-size: 0.875rem;
}