/* Buttons */
.btn {
	/* Make regular buttons-inline flex so icon + text center vertically and height is consistent */
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--color-accent);
	padding: .45rem .8rem;
	border-radius: var(--radius);
	color: var(--color-primary-contrast);
	text-decoration: none;
	font-size: .8rem;
	width: max-content;
	min-height: 38px; /* unify visual height across pages */
	transition: background .25s var(--ease-standard), filter .25s var(--ease-standard);
}
.btn:hover { filter: brightness(1.1); }

/* Button inside surface */
.btn-surface { display:inline-flex; align-items:center; gap:.5rem; color: var(--ui-btn-surface-text); background: var(--ui-btn-surface-bg); border:1px solid var(--ui-btn-surface-border); border-radius: var(--radius); padding:.45rem .8rem; text-decoration:none; font-size:.8rem; }
.btn-surface i { color: var(--ui-btn-surface-icon); }
.btn-surface:hover { background: color-mix(in srgb, var(--ui-btn-surface-bg) 85%, var(--ui-btn-surface-text) 15%); }

/* Accent / primary variants */
.btn-accent { background: var(--color-secondary); color: var(--color-secondary-contrast); border: 1px solid color-mix(in srgb, var(--color-secondary) 80%, transparent); }
.btn-primary { background: var(--color-accent); color: var(--color-primary-contrast); }