/* ── Typography (Tajawal + RTL) ── */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

* { font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif; }

html {
	font-size: 16px;
	direction: rtl;
	overflow-x: hidden;
}

body {
	background-color: var(--background);
	color: var(--foreground);
	line-height: 1.6;
	text-align: right;
}

h1 { font-size: 2rem; font-weight: 700; line-height: 1.3; }
h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.35; }
h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.4; }
h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; }

label { font-size: 0.875rem; font-weight: 500; line-height: 1.5; }

p { line-height: 1.7; }

a { cursor: pointer; }
button { cursor: pointer; }
select { cursor: pointer; }
[role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="option"], summary { cursor: pointer; }

@media (min-width: 1024px) {
	h1 { font-size: 2.5rem; }
	h2 { font-size: 2rem; }
	h3 { font-size: 1.5rem; }
}

@media (max-width: 640px) {
	button, a, input, select, textarea { min-height: 44px; }
	select,
	input[type="text"], input[type="email"], input[type="tel"],
	input[type="password"], input[type="date"], input[type="time"],
	textarea { font-size: 16px; }
}