/**
 * Deposit type colors — Vision Deposits tab (Reservation, Contract, Option).
 * Tokens: --st-deposit-{reservation,contract,option}-{bg,fg,border,accent} in tokens.css.
 * Spec: docs/DESIGN-SYSTEM.md → Deposit type colors.
 *
 * Use the badge classes for inline labels in lists, cards, summaries, and tables.
 * Use the stripe modifier on a card-like surface to add a top accent bar that
 * mirrors the deposit type. Vision deposits.css references the same tokens for
 * .dep-card-type-badge, .dep-overview-row-badge, and .dep-card--type-* accents.
 */

.deposit-type-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.18rem 0.5rem;
	border: 1px solid transparent;
	border-radius: 0;
	font-family: var(--font-sans, inherit);
	font-size: var(--text-caps, 11px);
	font-weight: var(--weight-bold, 700);
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	background: var(--surface-elevated, #fff);
	color: var(--text-primary, #00244d);
}

.deposit-type-badge--reservation {
	color: var(--st-deposit-reservation-fg);
	background: var(--st-deposit-reservation-bg);
	border-color: var(--st-deposit-reservation-border);
}

.deposit-type-badge--contract {
	color: var(--st-deposit-contract-fg);
	background: var(--st-deposit-contract-bg);
	border-color: var(--st-deposit-contract-border);
}

.deposit-type-badge--option {
	color: var(--st-deposit-option-fg);
	background: var(--st-deposit-option-bg);
	border-color: var(--st-deposit-option-border);
}

.deposit-type-stripe {
	position: relative;
}

.deposit-type-stripe::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--deposit-type-accent, var(--border-default, transparent));
}

.deposit-type-stripe--reservation { --deposit-type-accent: var(--st-deposit-reservation-accent); }
.deposit-type-stripe--contract    { --deposit-type-accent: var(--st-deposit-contract-accent); }
.deposit-type-stripe--option      { --deposit-type-accent: var(--st-deposit-option-accent); }

.ds-deposit-swatch-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.ds-deposit-swatch {
	min-width: 8.5rem;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--border-default, #dce3ec);
	border-radius: 0;
	font-size: 1rem;
	line-height: 1.35;
}

.ds-deposit-swatch__label {
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.ds-deposit-swatch__hex {
	font-family: var(--font-mono, monospace);
	color: var(--text-secondary, #4a5a70);
}

.ds-deposit-swatch--reservation {
	background: var(--st-deposit-reservation-bg);
	border-left: 4px solid var(--st-deposit-reservation-accent);
	color: var(--st-deposit-reservation-fg);
}

.ds-deposit-swatch--contract {
	background: var(--st-deposit-contract-bg);
	border-left: 4px solid var(--st-deposit-contract-accent);
	color: var(--st-deposit-contract-fg);
}

.ds-deposit-swatch--option {
	background: var(--st-deposit-option-bg);
	border-left: 4px solid var(--st-deposit-option-accent);
	color: var(--st-deposit-option-fg);
}