/* Buttons + links — states from screenshots/05-interaction-states.png */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-button);
	border-radius: var(--radius);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition-fast);
	transition-property: color, background-color, border-color;
}

.btn-primary {
	background: var(--color-primary);
	color: var(--color-ink);
	padding: 15px 24px;
}
.btn-primary:hover,
.btn-primary:focus-visible {
	background: var(--color-accent);
	color: var(--color-white);
}
.btn-primary:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}
.btn-primary[aria-disabled="true"] {
	background: var(--color-line);
	color: #6B6B6B;
	border-color: #D6D6D6;
	cursor: not-allowed;
}

.btn-primary--lg { padding: 19px 30px; font-size: 17px; }

.btn-secondary {
	background: transparent;
	color: var(--color-ink);
	border-color: var(--color-ink);
	padding: 15px 24px;
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
	background: var(--color-ink);
	color: var(--color-white);
}

.link {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-caption);
	color: var(--color-accent);
	text-decoration: underline;
	text-decoration-color: rgba(194, 65, 12, 0.4);
	text-underline-offset: 3px;
	transition: var(--transition-fast);
	transition-property: color;
}
.link:hover, .link:focus-visible {
	color: var(--color-ink);
	text-decoration-color: currentColor;
}

.link-inline {
	font-family: var(--font-body);
	font-weight: 600;
	color: var(--color-accent);
	text-decoration: underline;
	text-decoration-color: rgba(194, 65, 12, 0.4);
	transition: var(--transition-fast);
	transition-property: color;
}
.link-inline:hover, .link-inline:focus-visible { color: var(--color-ink); text-decoration-color: currentColor; }

.section-dark .link,
.section-dark .link-inline {
	color: var(--color-white);
	text-decoration-color: rgba(255, 255, 255, 0.45);
}
.section-dark .link:hover,
.section-dark .link:focus-visible,
.section-dark .link-inline:hover,
.section-dark .link-inline:focus-visible {
	color: var(--color-primary);
	text-decoration-color: currentColor;
}