/**
 * Talserv — enterprise typography system
 * Fonts: Poppins (headings/UI) + Inter (body), Open Sans fallback.
 * Does not change colors, layouts, or content.
 */

:root {
    --font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', 'Open Sans', system-ui, -apple-system, sans-serif;
    --font-button: 'Poppins', system-ui, -apple-system, sans-serif;
    --font-nav: 'Poppins', system-ui, -apple-system, sans-serif;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Mobile-first scale */
    --fs-hero: 2.125rem;   /* 34px */
    --fs-h1: 2.125rem;     /* 34px — page H1 falls back near hero mobile */
    --fs-h2: 1.625rem;     /* 26px */
    --fs-h3: 1.375rem;     /* 22px */
    --fs-card-title: 1.25rem; /* 20px */
    --fs-body: 0.9375rem;  /* 15px */
    --fs-small: 0.875rem;  /* 14px */
    --fs-nav: 1rem;        /* 16px */
    --fs-button: 1rem;     /* 16px */
    --fs-label: 1rem;      /* 16px */
    --fs-input: 1rem;      /* 16px */
    --fs-placeholder: 0.9375rem; /* 15px */
    --fs-table-header: 1rem; /* 16px */
    --fs-table-cell: 0.9375rem; /* 15px */

    --lh-hero: 1.15;
    --lh-heading: 1.2;
    --lh-body: 1.7;
    --lh-list: 1.6;

    --ls-heading: -0.02em;
    --ls-body: normal;
    --ls-button: 0.02em;
}

@media (min-width: 768px) {
    :root {
        --fs-hero: 2.5rem;      /* 40px tablet */
        --fs-h1: 2.5rem;
        --fs-h2: 1.875rem;      /* 30px */
        --fs-h3: 1.5rem;        /* 24px */
        --fs-card-title: 1.375rem; /* 22px */
        --fs-body: 1rem;        /* 16px */
        --fs-nav: 1rem;
    }
}

@media (min-width: 992px) {
    :root {
        --fs-hero: 3rem;        /* 48px laptop */
        --fs-h1: 3rem;
        --fs-h2: 2.25rem;       /* 36px */
        --fs-h3: 1.75rem;       /* 28px */
        --fs-body: 1.0625rem;   /* 17px */
        --fs-nav: 1.0625rem;    /* 17px */
    }
}

@media (min-width: 1200px) {
    :root {
        --fs-hero: 3.25rem;     /* 52px desktop */
        --fs-h1: 3.25rem;
    }
}

/* ---------- Base ---------- */
html {
    font-size: 100%;
}

body {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4,
h5, .h5,
h6, .h6 {
    font-size: var(--fs-card-title);
    font-weight: var(--fw-semibold);
}

/* Section / card / hero titles (common component classes) */
.section-title,
.clients-section-header .section-title,
.service-title,
.job-title,
.feature-card .feature-title,
.why-card .why-title,
.industry-card .industry-title,
.about-content h2,
.about-content .about-title,
.cta-title,
.testimonial-title,
.process-title,
.page-header h1,
.admin-content .page-header h1,
.admin-content h1.h3,
.card-title,
.stat-label {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-heading);
    line-height: var(--lh-heading);
}

.section-title,
.cta-title,
.cta-heading {
    font-size: var(--fs-h2);
}

.page-hero h1,
.page-hero .display-5,
.page-hero .display-6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-h1);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
}

#ctaSection .cta-heading {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-h1);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
}

.service-title,
.job-title,
.feature-card .feature-title,
.why-card .why-title,
.industry-card .industry-title,
.card-title {
    font-size: var(--fs-card-title);
}

/* Hero title */
#heroSection .hero-title {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-hero);
    line-height: var(--lh-hero);
    letter-spacing: var(--ls-heading);
}

#heroSection .hero-description {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
}

#heroSection .hero-floating-card__number,
#heroSection .hero-floating-card__title {
    font-family: var(--font-heading);
}

#heroSection .hero-floating-card__subtitle {
    font-family: var(--font-body);
}

/* ---------- Body copy ---------- */
p,
li,
dd,
dt,
td,
th,
label,
.form-text,
.text-muted,
.lead,
.footer-about,
.contact-item,
.hero-description,
.service-text,
.job-meta,
.about-content p,
.section-label {
    font-family: var(--font-body);
}

p,
.lead,
.footer-about,
.service-text,
.about-content p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-regular);
}

ul, ol {
    line-height: var(--lh-list);
}

small,
.small,
.form-text,
.section-label {
    font-size: var(--fs-small);
}

/* ---------- Navigation & buttons ---------- */
#siteNavbar .nav-link,
.navbar .nav-link,
.admin-sidebar .nav-link,
.nav-pills .nav-link,
.nav-tabs .nav-link,
.pipeline-pills .nav-link,
.filter-pills .nav-link {
    font-family: var(--font-nav);
    font-weight: var(--fw-medium);
    font-size: var(--fs-nav);
    letter-spacing: var(--ls-body);
}

#siteNavbar .navbar-auth .btn,
.btn,
button.btn,
a.btn {
    font-family: var(--font-button);
    font-weight: var(--fw-medium);
    font-size: var(--fs-button);
    letter-spacing: var(--ls-button);
}

/* ---------- Forms ---------- */
.form-label,
label.form-label {
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-label);
}

.form-control,
.form-select,
textarea.form-control,
input.form-control,
select.form-select {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: var(--fs-input);
}

.form-control::placeholder,
textarea.form-control::placeholder {
    font-family: var(--font-body);
    font-size: var(--fs-placeholder);
    font-weight: var(--fw-regular);
}

/* ---------- Tables ---------- */
.table thead th,
.admin-table thead th,
table thead th {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: var(--fs-table-header);
    letter-spacing: var(--ls-body);
}

.table tbody td,
.admin-table tbody td,
table tbody td {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: var(--fs-table-cell);
    line-height: var(--lh-list);
}

/* ---------- Footer ---------- */
#siteFooter,
#siteFooter p,
#siteFooter a,
#siteFooter .footer-link,
#siteFooter .contact-item,
#siteFooter .footer-about {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
}

#siteFooter .footer-heading {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-heading);
}

/* ---------- Admin ---------- */
body.admin-page {
    font-family: var(--font-body);
}

body.admin-page h1,
body.admin-page h2,
body.admin-page h3,
body.admin-page .page-header h1,
body.admin-page .stat-value {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-heading);
}

body.admin-page .stat-value {
    line-height: var(--lh-heading);
}

body.admin-page .stat-label,
body.admin-page .admin-content p,
body.admin-page .text-muted {
    font-family: var(--font-body);
}

/* ---------- Chatbot ---------- */
#talservChatbot,
#talservChatbot .cb-body,
#talservChatbot .cb-footer textarea {
    font-family: var(--font-body);
}

#talservChatbot .cb-header,
#talservChatbot .cb-header h2,
#talservChatbot .cb-send {
    font-family: var(--font-button);
}

#talservChatbot .cb-header h2 {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-heading);
}

/* ---------- Auth / login pages ---------- */
body.login-page {
    font-family: var(--font-body);
}

body.login-page .login-title {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-heading);
}

body.login-page .login-subtitle,
body.login-page .form-label,
body.login-page .form-control,
body.login-page .form-check-label,
body.login-page .register-text {
    font-family: var(--font-body);
}

body.login-page .form-label {
    font-weight: var(--fw-medium);
}

body.login-page .btn-login {
    font-family: var(--font-button);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-button);
}