@layer components {
	/* Button component — docs/design-system.md §8.
	 * First real entry in assets/css/components/. Composed entirely
	 * from existing semantic tokens; no new colors introduced. */
	.tf-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--tf-space-3xs);
		padding-block: var(--tf-space-2xs);
		padding-inline: var(--tf-space-m);
		border: none;
		border-radius: var(--tf-radius-full);
		font-size: var(--tf-font-size-s);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		transition: background-color 150ms ease, color 150ms ease;
	}

	.tf-button--primary {
		background-color: var(--tf-accent);
		color: var(--tf-on-accent);
	}

	.tf-button--primary:hover {
		background-color: var(--tf-accent-hover);
		color: var(--tf-on-accent);
	}

	.tf-button--secondary {
		background-color: transparent;
		color: var(--tf-text);
		border: 1px solid var(--tf-border-strong);
	}

	.tf-button--secondary:hover {
		background-color: var(--tf-surface-alt);
	}

	/* Arabic typographic correction (docs/design-system.md §23) —
	 * uppercase is meaningless in Arabic and letter-spacing breaks
	 * letter joins. Not covered by the global body/heading rule in
	 * typography.css since buttons carry their own text-transform. */
	[dir="rtl"] .tf-button {
		text-transform: none;
		letter-spacing: normal;
	}
}