@layer components {
	.eyebrow {
		color: var(--color-accent);
		font-size: var(--font-size-small);
		font-weight: 650;
		line-height: 1.4;
		letter-spacing: 0.025em;
	}

	.lead {
		font-size: var(--font-size-lead);
	}

	.button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.55rem;

		min-block-size: 2.75rem;
		padding: 0.8rem 1.1rem;
		border-radius: 1rem;

		background: var(--color-accent);
		color: var(--color-surface);

		font-size: var(--font-size-body);
		font-weight: 600;
		line-height: 1.4;
		text-align: center;
		text-decoration: none;
	}

	.button-icon {
		display: block;
		inline-size: 1.2rem;
		block-size: 1.2rem;
		flex-shrink: 0;

		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.button-secondary {
		background: var(--color-background);
		color: var(--color-text);
		box-shadow: inset 0 0 0 1px var(--color-border);
	}

	.text-link {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;

		min-block-size: 2.75rem;

		color: var(--color-accent);
		font-weight: 600;
		line-height: 1.4;
		text-decoration: underline;
	}

	@media (hover: hover) {
		.button:hover {
			background: var(--color-accent-strong);
		}

		.button-secondary:hover {
			background: var(--color-border);
			color: var(--color-text);
		}

		.text-link:hover {
			color: var(--color-accent-strong);
		}
	}
}