/* Button (spec §4.23): inline-flex, gap 8, 600, pill, transition all 200ms; ring 2px + 2px white offset on :focus
   (the live site uses focus:, not focus-visible:, so the ring also shows after a click). */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--spacing) * 2);
	font-weight: var(--font-weight-semibold);
	border-radius: var(--radius-full);
	transition: all var(--duration-button) var(--ease-default);
	--btn-ring: var(--color-orange-50a);
	cursor: pointer;
}
.btn:focus { outline: none; box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--btn-ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .btn { transition-property: none; } }
.btn .icon { flex-shrink: 1; }
[dir="rtl"] .btn .icon-arrow-right { transform: scaleX(-1); }

.btn--sm { padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4); font-size: var(--text-sm); line-height: var(--text-sm-lh); }
.btn--md { padding: calc(var(--spacing) * 3) calc(var(--spacing) * 6); font-size: var(--text-base); line-height: var(--text-base-lh); }
.btn--lg { padding: calc(var(--spacing) * 4) calc(var(--spacing) * 8); font-size: var(--text-lg); line-height: var(--text-lg-lh); }

.btn--primary { background-color: var(--color-brand-orange); color: var(--color-white); }
.btn--primary:hover { background-color: var(--color-orange-600); }

.btn--outline { border: 2px solid var(--color-brand-dark); color: var(--color-brand-dark); --btn-ring: var(--color-dark-50); }
.btn--outline:hover { background-color: var(--color-brand-dark); color: var(--color-white); }

.btn--outline-white { border: 2px solid var(--color-white-70); color: var(--color-white); --btn-ring: var(--color-white-40); }
.btn--outline-white:hover { background-color: var(--color-white-10); color: var(--color-white); }

.btn--ghost { color: var(--color-brand-dark); --btn-ring: var(--color-gray-200); }
.btn--ghost:hover { background-color: var(--color-gray-100); }

.btn--full { width: 100%; }
.btn--full-mobile { width: 100%; }
@media (min-width: 40rem) { .btn--full-mobile { width: auto; } }