/**
 * Smart Leading Net — Typography
 */

body,
button,
input,
textarea,
select {
	font-family: var(--font-family);
}

body {
	font-size: var(--paragraph-size);
	font-weight: var(--paragraph-weight);
	line-height: 1.6;
	color: var(--text-color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: var(--font-family);
	color: var(--heading-color);
	margin-top: 0;
	margin-bottom: 0.75em;
}

h1,
.h1 {
	font-size: var(--h1-size);
	font-weight: var(--h1-weight);
	line-height: 1.15;
}

h2,
.h2 {
	font-size: var(--h2-size);
	font-weight: var(--h2-weight);
	line-height: 1.2;
}

h3,
.h3 {
	font-size: var(--h3-size);
	font-weight: var(--h3-weight);
	line-height: 1.25;
}

h4,
.h4 {
	font-size: var(--h4-size);
	font-weight: var(--h4-weight);
	line-height: 1.3;
}

h5,
.h5 {
	font-size: var(--h5-size);
	font-weight: var(--h5-weight);
	line-height: 1.35;
}

h6,
.h6 {
	font-size: var(--h5-size);
	font-weight: var(--h5-weight);
	line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Reusable Heading Classes
   Use .section-title for default section headings across all pages.
   Use .heading-xl / .heading-lg / .heading-md / .heading-sm when semantic
   heading levels need distinct desktop sizes. Section main headings use 28px
   on mobile (Brand Kit); other headings collapse to 26px.
   -------------------------------------------------------------------------- */

.heading-xl {
	font-size: var(--heading-xl-size);
	font-weight: var(--heading-xl-weight);
	line-height: 1.15;
	color: var(--heading-color);
}

.heading-lg {
	font-size: var(--heading-lg-size);
	font-weight: var(--heading-lg-weight);
	line-height: 1.2;
	color: var(--heading-color);
}

.heading-md {
	font-size: var(--heading-md-size);
	font-weight: var(--heading-md-weight);
	line-height: 1.25;
	color: var(--heading-color);
}

.heading-sm {
	font-size: var(--heading-sm-size);
	font-weight: var(--heading-sm-weight);
	line-height: 1.3;
	color: var(--heading-color);
}

p {
	margin-top: 0;
	margin-bottom: 1rem;
}

a {
	color: var(--primary-color);
	text-decoration: none;
	transition: color var(--transition-base);
}

a:hover,
a:focus {
	color: var(--secondary-color);
}

strong,
b {
	font-weight: var(--font-weight-bold);
}