/* ==========================================================================
   TYPOGRAPHY — Font imports, modular scale, typographic utilities
   BlushTheme v1.0.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   Heading Styles
   -------------------------------------------------------------------------- */

.heading-display {
	font-family: var(--font-display);
	font-weight: var(--font-display-weight);
	font-size: var(--text-display);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-display);
	color: var(--color-text-heading);
}

.heading-1 {
	font-family: var(--font-display);
	font-weight: var(--font-display-weight);
	font-size: var(--text-h1);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-display);
	color: var(--color-text-heading);
}

.heading-2 {
	font-family: var(--font-display);
	font-weight: var(--font-display-weight);
	font-size: var(--text-h2);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-display);
	color: var(--color-text-heading);
}

.heading-3 {
	font-family: var(--font-display);
	font-weight: var(--font-display-weight);
	font-size: var(--text-h3);
	line-height: var(--leading-heading);
	color: var(--color-text-heading);
}

.heading-4 {
	font-family: var(--font-display);
	font-weight: var(--font-display-weight);
	font-size: var(--text-h4);
	line-height: var(--leading-heading);
	color: var(--color-text-heading);
}

.heading-5 {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--text-h5);
	line-height: var(--leading-heading);
	color: var(--color-text-heading);
}

.heading-6 {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--text-h6);
	line-height: var(--leading-heading);
	color: var(--color-text-heading);
}

/* --------------------------------------------------------------------------
   Text Styles
   -------------------------------------------------------------------------- */

.body-text {
	font-family: var(--font-body);
	font-weight: var(--font-body-weight, 300);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	color: var(--color-text-primary);
}

.body-text--editorial {
	font-size: clamp(1.125rem, 1.8vw, 1.375rem);
	line-height: 1.8;
}

.label-text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 0.75rem;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: var(--tracking-uppercase);
	color: var(--color-text-secondary);
}

.section-label {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--color-accent);
	margin-bottom: var(--space-md);
	display: block;
}

.button-text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   Drop Cap
   -------------------------------------------------------------------------- */

.drop-cap::first-letter {
	font-family: var(--font-display);
	font-weight: var(--font-display-weight);
	float: left;
	font-size: 4.5em;
	line-height: 0.75;
	padding-right: 0.08em;
	padding-top: 0.06em;
	color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Pull Quote
   -------------------------------------------------------------------------- */

.pull-quote {
	font-family: var(--font-display);
	font-weight: var(--font-display-weight);
	font-size: clamp(2rem, 3.5vw, 3rem);
	line-height: 1.3;
	color: var(--color-text-heading);
	position: relative;
}

.pull-quote em,
.pull-quote .accent-word {
	color: var(--color-accent);
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Entry Content (Blog posts, generic pages)
   -------------------------------------------------------------------------- */

.entry-content {
	font-family: var(--font-body);
	font-weight: var(--font-body-weight, 300);
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	line-height: 1.8;
	color: var(--color-text-primary);
}

.entry-content h2 {
	font-family: var(--font-display);
	font-weight: var(--font-display-weight);
	font-size: var(--text-h3);
	line-height: var(--leading-heading);
	color: var(--color-text-heading);
	margin-top: 3em;
	margin-bottom: var(--space-lg);
}

.entry-content h3 {
	font-family: var(--font-display);
	font-weight: var(--font-display-weight);
	font-size: var(--text-h4);
	line-height: var(--leading-heading);
	color: var(--color-text-heading);
	margin-top: 2em;
	margin-bottom: var(--space-md);
}

.entry-content p {
	margin-bottom: var(--space-lg);
}

.entry-content a {
	color: var(--color-accent);
	text-decoration: underline;
	text-decoration-color: rgba(201, 169, 110, 0.4);
	text-underline-offset: 3px;
	transition: text-decoration-color var(--duration-fast) var(--ease-out);
}

.entry-content a:hover {
	text-decoration-color: var(--color-accent);
}

.entry-content blockquote {
	border-left: 3px solid var(--color-accent);
	padding-left: var(--space-xl);
	margin: var(--space-2xl) 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--color-text-heading);
}

.entry-content ul,
.entry-content ol {
	margin-bottom: var(--space-lg);
	padding-left: var(--space-xl);
}

.entry-content li {
	margin-bottom: var(--space-sm);
	list-style: disc;
}

.entry-content ol li {
	list-style: decimal;
}

.entry-content img {
	margin: var(--space-2xl) 0;
	border-radius: var(--card-radius);
}

/* --------------------------------------------------------------------------
   Responsive Typography
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.heading-display {
		font-size: clamp(2.5rem, 10vw, 4rem);
	}

	.heading-1 {
		font-size: clamp(2rem, 7vw, 3rem);
	}

	.heading-2 {
		font-size: clamp(1.75rem, 5vw, 2.5rem);
	}

	.heading-3 {
		font-size: clamp(1.5rem, 4vw, 2rem);
	}

	.pull-quote {
		font-size: clamp(1.25rem, 5vw, 1.75rem);
	}
}