/* Internal style guide page only. Token-driven; no literal values. */

.dt-styleguide__lede {
	max-width: var(--container-prose);
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--dt-ink-soft);
}

.dt-styleguide__token,
.dt-styleguide__icon-cell code {
	font-family: var(--ff-mono);
	font-size: var(--fs-xs);
	color: var(--dt-ink-soft);
	background: var(--dt-surface-alt);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-sm);
}

.dt-styleguide__icon-cell {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	align-items: center;
	padding: var(--space-4);
	border: var(--border-thin);
	border-radius: var(--radius-card);
	background: var(--dt-surface);
	color: var(--dt-ink);
}

.dt-swatch {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.dt-swatch__chip {
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: var(--radius-card);
	border: var(--border-thin);
	background: var(--swatch-color, var(--dt-surface-alt));
}

.dt-swatch__label {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	font-size: var(--fs-xs);
}

.dt-swatch__label code {
	font-family: var(--ff-mono);
	color: var(--dt-ink-soft);
}

.dt-styleguide__fullwidth { max-width: var(--container-narrow); }