/**
 * Teton Troutfitters — Typography Utility Classes
 *
 * Apply directly in Elementor custom CSS classes or WordPress template HTML.
 * All classes use --tt-* design tokens from design-tokens.css.
 * Source: Typography Styling Kit v2, Section 9 + Section 7.
 */


/* ── Display (Slathers) ──────────────────────────────── */

.tt-type-hero {
	font-family: var(--tt-font-display);
	font-size: var(--tt-text-hero);
	font-weight: var(--tt-weight-normal);
	line-height: var(--tt-lh-hero);
	letter-spacing: var(--tt-ls-hero);
}

.tt-type-h1 {
	font-family: var(--tt-font-display);
	font-size: var(--tt-text-h1);
	font-weight: var(--tt-weight-normal);
	line-height: var(--tt-lh-hero);
}


/* ── Headings (Cabin) ────────────────────────────────── */

.tt-type-h2 {
	font-family: var(--tt-font-heading);
	font-size: var(--tt-text-h2);
	font-weight: var(--tt-weight-semibold);
	line-height: var(--tt-lh-h2);
}

.tt-type-h2-card {
	font-family: var(--tt-font-heading);
	font-size: var(--tt-text-h2-card);
	font-weight: var(--tt-weight-semibold);
	line-height: var(--tt-lh-heading);
}

.tt-type-h3 {
	font-family: var(--tt-font-heading);
	font-size: var(--tt-text-h3);
	font-weight: var(--tt-weight-semibold);
	line-height: var(--tt-lh-heading);
}


/* ── Body & Editorial (Lora) ─────────────────────────── */

.tt-type-lead {
	font-family: var(--tt-font-body);
	font-size: var(--tt-text-lead);
	font-weight: var(--tt-weight-normal);
	line-height: var(--tt-lh-lead);
}

.tt-type-body {
	font-family: var(--tt-font-body);
	font-size: var(--tt-text-body);
	font-weight: var(--tt-weight-normal);
	line-height: var(--tt-lh-body);
}

.tt-type-card {
	font-family: var(--tt-font-body);
	font-size: var(--tt-text-card);
	font-weight: var(--tt-weight-normal);
	line-height: var(--tt-lh-card);
}

.tt-type-quote {
	font-family: var(--tt-font-body);
	font-size: var(--tt-text-quote);
	font-weight: var(--tt-weight-normal);
	font-style: italic;
	line-height: var(--tt-lh-quote);
}

.tt-type-price {
	font-family: var(--tt-font-body);
	font-size: var(--tt-text-price);
	font-weight: var(--tt-weight-normal);
}


/* ── UI & Functional (Arial) ─────────────────────────── */

.tt-type-btn {
	font-family: var(--tt-font-sans);
	font-size: var(--tt-text-ui);
	font-weight: var(--tt-weight-bold);
	letter-spacing: var(--tt-ls-btn);
	text-transform: uppercase;
}

.tt-type-eyebrow {
	font-family: var(--tt-font-sans);
	font-size: var(--tt-text-eyebrow);
	font-weight: var(--tt-weight-bold);
	letter-spacing: var(--tt-ls-eyebrow);
	text-transform: uppercase;
}

.tt-type-tag {
	font-family: var(--tt-font-sans);
	font-size: var(--tt-text-tag);
	font-weight: var(--tt-weight-normal);
	letter-spacing: var(--tt-ls-tag);
}

.tt-type-micro {
	font-family: var(--tt-font-sans);
	font-size: var(--tt-text-micro);
	font-weight: var(--tt-weight-normal);
	letter-spacing: var(--tt-ls-micro);
	text-transform: uppercase;
}

.tt-type-legal {
	font-family: var(--tt-font-sans);
	font-size: var(--tt-text-legal);
	font-weight: var(--tt-weight-normal);
	letter-spacing: var(--tt-ls-legal);
}


/* ── Responsive Scale (Kit Section 7) ────────────────── */
/* Only display/heading sizes reduce. Body, UI, and all
   Arial text hold at every breakpoint. */

@media (max-width: 64rem) {
	.tt-type-hero  { font-size: 2.25rem; }
	.tt-type-h1    { font-size: 2rem; }
	.tt-type-h2    { font-size: 1.75rem; }
	.tt-type-h2-card { font-size: 1.5rem; }
	.tt-type-h3    { font-size: 1.125rem; }
	.tt-type-lead  { font-size: 1.125rem; }
	.tt-type-price { font-size: 1.25rem; }
}

@media (max-width: 48rem) {
	.tt-type-hero  { font-size: 1.75rem; }
	.tt-type-h1    { font-size: 1.75rem; }
	.tt-type-h2    { font-size: 1.5rem; }
	.tt-type-h2-card { font-size: 1.25rem; }
	.tt-type-h3    { font-size: 1rem; }
	.tt-type-lead  { font-size: 1rem; }
	.tt-type-price { font-size: 1.125rem; }
}