/**
 * Design System — primitives & shared language.
 * All pages compose from these — never invent one-off chrome.
 */

/* ----- Type roles ----- */
.ds-kicker {
	margin: 0 0 var(--space-1);
	font-family: var(--tolin-font-sans);
	font-size: var(--tolin-text-xs);
	font-weight: 600;
	letter-spacing: var(--tolin-tracking-kicker);
	text-transform: uppercase;
	color: var(--tolin-rose);
}

.ds-kicker--on-dark {
	color: var(--tolin-champagne);
}

.ds-display {
	margin: 0 0 clamp(16px, 2vw, 28px);
	font-family: var(--tolin-font-serif);
	font-size: var(--tolin-text-display);
	font-weight: 500;
	line-height: var(--tolin-leading-tight);
	letter-spacing: var(--tolin-tracking-display);
	color: var(--tolin-rose);
}

.ds-title {
	margin: 0 0 clamp(12px, 1.5vw, 20px);
	font-family: var(--tolin-font-serif);
	font-size: var(--tolin-text-3xl);
	font-weight: 500;
	line-height: var(--tolin-leading-tight);
	letter-spacing: var(--tolin-tracking-display);
	color: var(--tolin-mocha);
}

.ds-title--on-dark {
	color: var(--tolin-canvas);
}

.ds-lede {
	margin: var(--space-3) 0 0;
	max-width: var(--measure-lede);
	font-size: var(--tolin-text-md);
	line-height: var(--tolin-leading-body);
	color: var(--tolin-ink-muted);
	white-space: pre-line;
}

.ds-lede--on-dark {
	color: rgba(255, 252, 250, 0.72);
}

.ds-body {
	font-size: var(--tolin-text-md);
	line-height: var(--tolin-leading-body);
	color: var(--tolin-ink);
}

/* ----- Surfaces ----- */
.ds-surface {
	background: var(--tolin-surface);
	border: 1px solid var(--tolin-line);
	border-radius: var(--tolin-radius-lg);
	box-shadow: var(--tolin-shadow-sm);
}

.ds-surface--float {
	background: var(--tolin-surface-elevated);
	border: 1px solid rgba(232, 224, 218, 0.9);
	border-radius: var(--tolin-radius-lg);
	box-shadow: var(--tolin-shadow-float);
}

.ds-surface--ivory {
	background: var(--tolin-ivory);
	border: 1px solid var(--tolin-line);
	border-radius: var(--tolin-radius-lg);
}

.ds-surface--mocha {
	background: var(--tolin-mocha);
	color: var(--tolin-canvas);
	border-radius: var(--tolin-radius-lg);
}

.ds-hairline {
	border: 1px solid var(--tolin-line);
}

.ds-divider {
	height: 1px;
	border: 0;
	background: var(--tolin-line);
	margin: var(--space-3) 0;
}

/* ----- Media ----- */
.ds-media {
	display: block;
	width: 100%;
	border-radius: var(--tolin-radius-xl);
	object-fit: cover;
	background: var(--tolin-ivory-deep) center / cover no-repeat;
}

.ds-media--cover {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-size: cover;
	background-position: center;
}

/* ----- Section shell ----- */
.ds-section {
	padding-block: var(--space-section);
}

.ds-section--tight {
	padding-block: var(--space-section-tight);
}

.ds-section--ivory {
	background: var(--tolin-ivory);
}

.ds-section--canvas {
	background: var(--tolin-canvas);
}

.ds-section--mocha {
	background: var(--tolin-mocha);
	color: var(--tolin-canvas);
}

.ds-rail {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	margin-bottom: var(--space-4);
}

.ds-rail__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--tolin-text-sm);
	font-weight: 600;
	color: var(--tolin-rose);
	letter-spacing: 0.02em;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: border-color var(--tolin-duration) var(--tolin-ease);
}

.ds-rail__link:hover {
	border-bottom-color: var(--tolin-rose);
}

/* ----- Trust chip ----- */
.ds-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--tolin-surface-elevated);
	border: 1px solid var(--tolin-line);
	border-radius: var(--tolin-radius-pill);
	box-shadow: var(--tolin-shadow-sm);
	font-size: var(--tolin-text-xs);
	font-weight: 600;
	color: var(--tolin-ink);
}

.ds-chip__icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--tolin-rose-soft);
	color: var(--tolin-rose);
}

/* ----- Focus ring utility ----- */
.ds-focus:focus-visible {
	outline: 2px solid var(--tolin-rose);
	outline-offset: 3px;
}