/* ============================================================
   04-typography.css
   Type scale, lead, eyebrow, mono, helpers.
   ============================================================ */

.ss-display {
	font-family: var(--ss-font-display);
	font-weight: 800;
	font-size: var(--ss-fs-4xl);
	line-height: var(--ss-lh-tight);
	letter-spacing: var(--ss-tracking-tight);
}

.ss-h1, h1.ss-h1 { font-size: var(--ss-fs-4xl); }
.ss-h2, h2.ss-h2 { font-size: var(--ss-fs-3xl); }
.ss-h3, h3.ss-h3 { font-size: var(--ss-fs-2xl); }
.ss-h4, h4.ss-h4 { font-size: var(--ss-fs-xl); }

.ss-eyebrow {
	font-size: var(--ss-fs-xs);
	font-weight: 600;
	letter-spacing: var(--ss-tracking-wider);
	text-transform: uppercase;
	color: var(--ss-gray);
}

.ss-lead {
	font-size: var(--ss-fs-md);
	color: var(--ss-gray);
	line-height: var(--ss-lh-loose);
}

.ss-mono {
	font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
	font-size: var(--ss-fs-sm);
	letter-spacing: var(--ss-tracking-wide);
}

.ss-text-gray { color: var(--ss-gray); }
.ss-text-black { color: var(--ss-black); }
.ss-text-white { color: var(--ss-white); }
.ss-text-violet { color: var(--ss-violet); }
.ss-text-turquoise { color: var(--ss-turquoise); }
.ss-text-lime { color: var(--ss-lime); }

.ss-text-center { text-align: center; }
.ss-text-left   { text-align: left; }
.ss-text-right  { text-align: right; }

.ss-balance { text-wrap: balance; }
.ss-pretty  { text-wrap: pretty; }

.ss-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--ss-space-2);
	padding: 0.35rem 0.75rem;
	background: var(--ss-gray-light);
	color: var(--ss-black);
	border-radius: var(--ss-radius-pill);
	font-size: var(--ss-fs-xs);
	font-weight: 600;
	letter-spacing: var(--ss-tracking-wide);
}

.ss-pill--violet    { background: var(--ss-violet); }
.ss-pill--turquoise { background: var(--ss-turquoise); }
.ss-pill--lime      { background: var(--ss-lime); }
.ss-pill--black     { background: var(--ss-black); color: var(--ss-white); }

.ss-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius-pill);
	font-size: var(--ss-fs-xs);
	color: var(--ss-gray);
	background: var(--ss-white);
}

.ss-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	color: var(--ss-black);
	text-decoration: none;
}

.ss-link-arrow svg {
	width: 18px;
	height: 18px;
	transition: transform var(--ss-dur-fast) var(--ss-ease);
}

.ss-link-arrow:hover svg {
	transform: translateX(3px);
}