/*
 * eSupply Canada — Typography Standards
 *
 * Defines the canonical type scale as CSS custom properties.
 * Use these variables on new pages and components to stay consistent.
 * Existing context-specific rules (card titles, footer labels, hero text)
 * remain in their own selectors and override these base defaults normally
 * via CSS specificity — no !important needed.
 */

:root {
    /* ── Type scale ─────────────────────────────────── */
    --fs-h1:    48px;
    --fs-h2:    36px;
    --fs-h3:    28px;
    --fs-h4:    22px;
    --fs-body:  18px;
    --fs-small: 16px;

    /* ── Font weights ───────────────────────────────── */
    --fw-h1: 700;
    --fw-h2: 700;
    --fw-h3: 600;
    --fw-h4: 600;
    --fw-body: 400;

    /* ── Line heights ───────────────────────────────── */
    --lh-heading: 1.2;
    --lh-body:    1.6;

    /* ── Spacing ────────────────────────────────────── */
    --space-section:   64px;
    --space-card:      24px;
    --space-paragraph: 20px;
    --space-heading:   20px;
}

/* ── Base body ─────────────────────────────────────── */
body {
    font-size:   var(--fs-body);
    font-weight: var(--fw-body);
    line-height: var(--lh-body);
    font-family: 'Mulish', sans-serif;
}

p {
    font-size:     var(--fs-body);
    line-height:   var(--lh-body);
    margin-bottom: var(--space-paragraph);
}

/*
 * Base heading scale.
 * Low-specificity single-element selectors so any scoped rule
 * (e.g. .ins-hero h1, footer h1) overrides without !important.
 */
h1 {
    font-size:     var(--fs-h1);
    font-weight:   var(--fw-h1);
    line-height:   var(--lh-heading);
    margin-bottom: var(--space-heading);
}

h2 {
    font-size:     var(--fs-h2);
    font-weight:   var(--fw-h2);
    line-height:   var(--lh-heading);
    margin-bottom: var(--space-heading);
}

h3 {
    font-size:     var(--fs-h3);
    font-weight:   var(--fw-h3);
    line-height:   var(--lh-heading);
    margin-bottom: var(--space-heading);
}

h4 {
    font-size:     var(--fs-h4);
    font-weight:   var(--fw-h4);
    line-height:   var(--lh-heading);
    margin-bottom: var(--space-heading);
}

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

/*
 * Responsive scale — shrink proportionally on smaller screens
 * so headings don't overflow on mobile.
 */
@media (max-width: 900px) {
    :root {
        --fs-h1:    36px;
        --fs-h2:    28px;
        --fs-h3:    22px;
        --fs-h4:    18px;
        --fs-body:  16px;
        --fs-small: 14px;

        --space-section:   48px;
        --space-heading:   16px;
        --space-paragraph: 16px;
    }
}

@media (max-width: 600px) {
    :root {
        --fs-h1:    28px;
        --fs-h2:    22px;
        --fs-h3:    18px;
        --fs-h4:    16px;
        --fs-body:  15px;
        --fs-small: 13px;

        --space-section: 32px;
    }
}