/* ============================================================
   Joybunch — Typography utility classes
   Per brand book v2.0 Appendix A.1 (22 type roles)
   References tokens. Loads after base.css so it can override default h1-h6
   when applied to non-heading elements.
   ============================================================ */

/* ---------- Display + heading utilities (apply to non-h elements) ---------- */
.t-display {
	font-family: var(--joy-font-display);
	font-weight: 700;
	font-size: var(--joy-text-hero);
	line-height: 1.05;
	letter-spacing: -0.022em;
	color: var(--color-text-primary);
	margin: 0;
}
.t-h1 {
	font-family: var(--joy-font-display);
	font-weight: 700;
	font-size: var(--joy-text-4xl);
	line-height: 1.1;
	letter-spacing: -0.018em;
	color: var(--color-text-primary);
	margin: 0;
}
@media (min-width: 768px) { .t-h1 { font-size: 44px; } }
.t-h2 {
	font-family: var(--joy-font-display);
	font-weight: 700;
	font-size: var(--joy-text-3xl);
	line-height: 1.15;
	letter-spacing: -0.014em;
	color: var(--color-text-primary);
	margin: 0;
}
.t-h3 {
	font-family: var(--joy-font-display);
	font-weight: 700;
	font-size: var(--joy-text-2xl);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--color-text-primary);
	margin: 0;
}
.t-h4 {
	font-family: var(--joy-font-display);
	font-weight: 600;
	font-size: var(--joy-text-xl);
	line-height: 1.25;
	letter-spacing: -0.005em;
	color: var(--color-text-primary);
	margin: 0;
}
.t-h5 {
	font-family: var(--joy-font-display);
	font-weight: 600;
	font-size: var(--joy-text-lg);
	line-height: 1.3;
	color: var(--color-text-primary);
	margin: 0;
}
.t-h6 {
	font-family: var(--joy-font-display);
	font-weight: 600;
	font-size: var(--joy-text-md);
	line-height: 1.35;
	color: var(--color-text-primary);
	margin: 0;
}

/* ---------- Eyebrow (uppercase coral lead-in) ---------- */
.t-eyebrow {
	font-family: var(--joy-font-body);
	font-weight: 700;
	font-size: var(--joy-text-xs);
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-brand);
	display: inline-block;
	margin: 0;
}

/* ---------- Form label utility (when not using <label>) ---------- */
.t-label {
	font-family: var(--joy-font-body);
	font-weight: 600;
	font-size: var(--joy-text-sm);
	line-height: 1.4;
	color: var(--color-text-primary);
	margin: 0;
	display: block;
}

/* ---------- Body variants ---------- */
.t-lead {
	font-family: var(--joy-font-body);
	font-weight: 400;
	font-size: var(--joy-text-lg);
	line-height: 1.6;
	color: var(--color-text-primary);
	margin: 0;
}
@media (min-width: 768px) { .t-lead { font-size: 18px; } }

.t-body-l {
	font-family: var(--joy-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
	color: var(--color-text-primary);
	margin: 0;
}
.t-body {
	font-family: var(--joy-font-body);
	font-weight: 400;
	font-size: var(--joy-text-md);
	line-height: 1.55;
	color: var(--color-text-primary);
	margin: 0;
}
.t-body-s {
	font-family: var(--joy-font-body);
	font-weight: 400;
	font-size: var(--joy-text-base);
	line-height: 1.5;
	color: var(--color-text-secondary);
	margin: 0;
}
.t-caption {
	font-family: var(--joy-font-body);
	font-weight: 400;
	font-size: var(--joy-text-sm);
	line-height: 1.5;
	color: var(--color-text-secondary);
	margin: 0;
}
.t-helper {
	font-family: var(--joy-font-body);
	font-weight: 400;
	font-size: var(--joy-text-sm);
	line-height: 1.45;
	color: var(--color-text-secondary);
	margin: 0;
}
.t-micro {
	font-family: var(--joy-font-body);
	font-weight: 500;
	font-size: var(--joy-text-xs);
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: var(--color-text-secondary);
	margin: 0;
}

/* ---------- Inline link ---------- */
.t-link {
	color: var(--color-link);
	font-weight: 500;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}
.t-link:hover {
	color: var(--color-link-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- CTA label ---------- */
.t-cta {
	font-family: var(--joy-font-body);
	font-weight: 600;
	font-size: var(--joy-text-md);
	line-height: 1.2;
}

/* ---------- Pricing (tabular numerics) ---------- */
.t-price {
	font-family: var(--joy-font-display);
	font-weight: 700;
	font-size: var(--joy-text-xl);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--color-text-primary);
	font-variant-numeric: tabular-nums;
}
.t-price-hero {
	font-family: var(--joy-font-display);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.1;
	letter-spacing: -0.012em;
	color: var(--color-text-primary);
	font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .t-price-hero { font-size: 36px; } }
.t-price-strike {
	font-family: var(--joy-font-body);
	font-weight: 500;
	font-size: var(--joy-text-base);
	line-height: 1.4;
	color: var(--color-text-secondary);
	text-decoration: line-through;
	font-variant-numeric: tabular-nums;
}

/* ---------- Hand-lettered (Caveat) ---------- */
.t-handlettered {
	font-family: var(--joy-font-handlettered);
	font-weight: 600;
	font-size: var(--joy-text-2xl);
	line-height: 1.2;
	color: var(--color-text-primary);
}
@media (min-width: 768px) { .t-handlettered { font-size: 28px; } }

.t-tagline {
	font-family: var(--joy-font-handlettered);
	font-weight: 500;
	font-size: 28px;
	line-height: 1.2;
	color: var(--joy-sage);
}
@media (min-width: 768px) { .t-tagline { font-size: 32px; } }

/* ---------- Small inline meta ---------- */
.t-tag {
	font-family: var(--joy-font-body);
	font-weight: 500;
	font-size: var(--joy-text-xs);
	line-height: 1.3;
	letter-spacing: 0.01em;
}
.t-badge {
	font-family: var(--joy-font-body);
	font-weight: 700;
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.t-code {
	font-family: var(--joy-font-mono);
	font-weight: 500;
	font-size: var(--joy-text-sm);
	line-height: 1.6;
	color: var(--color-text-primary);
	background: var(--joy-cream-light);
	padding: 2px 6px;
	border-radius: var(--joy-radius-sm);
}

/* ---------- Modifiers (color overrides for any .t-* class) ---------- */
.t-color-primary   { color: var(--color-text-primary) !important; }
.t-color-secondary { color: var(--color-text-secondary) !important; }
.t-color-tertiary  { color: var(--color-text-tertiary) !important; }
.t-color-inverse   { color: var(--color-text-inverse) !important; }
.t-color-brand     { color: var(--color-text-brand) !important; }
.t-color-success   { color: var(--color-text-success) !important; }
.t-color-error     { color: var(--color-text-error) !important; }
.t-color-warning   { color: var(--color-text-warning) !important; }

/* ---------- Alignment ---------- */
.t-center { text-align: center; }
.t-right  { text-align: right; }
.t-left   { text-align: left; }

/* ---------- Reading width cap (already in layout.css as .prose-readable) ---------- */