.dt-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--ff-sans);
	font-weight: var(--fw-semibold);
	line-height: 1;
	letter-spacing: var(--ls-snug);
	text-decoration: none;
	border-radius: var(--radius-button);
	border: 1px solid transparent;
	transition: background var(--duration-2) var(--ease-out),
	            border-color var(--duration-2) var(--ease-out),
	            color var(--duration-1) var(--ease-out),
	            box-shadow var(--duration-2) var(--ease-out),
	            transform var(--duration-1) var(--ease-out);
	cursor: pointer;
	white-space: nowrap;
	min-height: var(--touch-min);
}

.dt-button:hover  { text-decoration: none; }
.dt-button:active { transform: scale(0.98); }
.dt-button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.dt-button:disabled,
.dt-button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* sizes */
.dt-button--sm {
	font-size: var(--fs-sm);
	padding: var(--space-2) var(--space-3);
	min-height: 36px;
}
.dt-button--md {
	font-size: var(--fs-sm);
	padding: var(--space-3) var(--space-5);
}
.dt-button--lg {
	font-size: var(--fs-base);
	padding: var(--space-3) var(--space-8);
	min-height: 52px;
}

/* variants */
.dt-button--primary {
	background: var(--dt-primary);
	color: var(--dt-on-primary);
	border-color: var(--dt-primary);
}
.dt-button--primary:hover {
	background: var(--dt-primary-hover);
	border-color: var(--dt-primary-hover);
	color: var(--dt-on-primary);
	box-shadow: var(--shadow-sm);
}

.dt-button--secondary {
	background: var(--dt-surface);
	color: var(--dt-ink);
	border-color: var(--dt-border);
}
.dt-button--secondary:hover {
	background: var(--dt-bg);
	border-color: var(--dt-border-hover);
	color: var(--dt-ink);
}

.dt-button--ghost {
	background: transparent;
	color: var(--dt-ink);
	border-color: transparent;
}
.dt-button--ghost:hover {
	background: var(--dt-bg-alt);
	color: var(--dt-ink);
}

.dt-button--link {
	background: transparent;
	color: var(--dt-primary);
	border-color: transparent;
	border-radius: 0;
	padding-inline: 0;
	min-height: 0;
}
.dt-button--link:hover { color: var(--dt-primary-hover); }

/* Dark-context primary stays primary; secondary/ghost invert. */
.dt-section--dark .dt-button--secondary,
.dt-section--accent .dt-button--secondary {
	background: rgba(255,255,255,0.10);
	color: var(--dt-on-dark);
	border-color: rgba(255,255,255,0.18);
}
.dt-section--dark .dt-button--secondary:hover,
.dt-section--accent .dt-button--secondary:hover {
	background: rgba(255,255,255,0.18);
	border-color: rgba(255,255,255,0.32);
	color: var(--dt-on-dark);
}

.dt-section--dark .dt-button--ghost,
.dt-section--accent .dt-button--ghost { color: var(--dt-on-dark); }
.dt-section--dark .dt-button--ghost:hover,
.dt-section--accent .dt-button--ghost:hover { background: rgba(255,255,255,0.10); color: var(--dt-on-dark); }

/* modifiers */
.dt-button--full-width { width: 100%; }

.dt-button__icon { display: inline-flex; align-items: center; }
.dt-button__icon svg { display: block; }