:root {
	--satwa-header-bg: #101a2b;
	--satwa-footer-bg: #101a2b;
	--satwa-body-bg: #f4efe6;
	--satwa-card-bg: #fbf8f2;
	--satwa-primary: #101a2b;
	--satwa-primary-hover: #17243a;
	--satwa-heading: #101a2b;
	--satwa-text: #2b3442;
	--satwa-text-muted: #667080;
	--satwa-border: #d9d2c6;
	--satwa-focus: #101a2b;
	--satwa-space-1: 0.25rem;
	--satwa-space-2: 0.5rem;
	--satwa-space-3: 0.75rem;
	--satwa-space-4: 1rem;
	--satwa-space-5: 1.5rem;
	--satwa-space-6: 2rem;
	--satwa-space-7: 3rem;
	--satwa-space-8: 4rem;
	--satwa-container: 72rem;
	--satwa-content: 48rem;
	--satwa-radius-sm: 0.375rem;
	--satwa-radius-md: 0.75rem;
	--satwa-radius-lg: 1rem;
	--satwa-shadow-sm: 0 1px 2px rgba(16, 26, 43, 0.06);
	--satwa-shadow-md: 0 4px 14px rgba(16, 26, 43, 0.10);
	--satwa-section-padding: var(--satwa-space-8);
	--satwa-card-padding: var(--satwa-space-5);
	--satwa-grid-gap: var(--satwa-space-5);
	--satwa-element-gap: var(--satwa-space-3);
	--satwa-button-radius: var(--satwa-radius-md);
	--satwa-card-radius: var(--satwa-radius-md);
	--satwa-input-radius: var(--satwa-radius-sm);
	--satwa-image-radius: var(--satwa-radius-md);
	--satwa-shadow-current: var(--satwa-shadow-sm);
	--satwa-motion-scale: 1;
	--satwa-motion-duration-factor: 1;
	--satwa-header-padding: var(--satwa-space-4);
	--satwa-mobile-header-padding: var(--satwa-space-4);
	--satwa-footer-padding: var(--satwa-space-7);
	--satwa-duration-fast: calc(150ms * var(--satwa-motion-duration-factor));
	--satwa-duration-normal: calc(220ms * var(--satwa-motion-duration-factor));
	--satwa-ease: ease-out;
}

html {
	font-family: "Cairo", sans-serif;
}

body {
	margin: 0;
	background: var(--satwa-body-bg);
	color: var(--satwa-text);
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--satwa-focus);
	outline-offset: 2px;
}

:where(a, button) {
	transition: opacity calc(var(--satwa-duration-fast) * var(--satwa-motion-scale)) var(--satwa-ease), background-color calc(var(--satwa-duration-fast) * var(--satwa-motion-scale)) var(--satwa-ease), color calc(var(--satwa-duration-fast) * var(--satwa-motion-scale)) var(--satwa-ease), border-color calc(var(--satwa-duration-fast) * var(--satwa-motion-scale)) var(--satwa-ease);
}

.satwa-skip-link {
	position: absolute;
	inset-block-start: -999px;
	inset-inline-start: 0;
	z-index: 100;
	padding: var(--satwa-space-2) var(--satwa-space-4);
	background: var(--satwa-header-bg);
	color: var(--satwa-body-bg);
	border-start-start-radius: 0;
	border-start-end-radius: 0;
	border-end-start-radius: 0;
	border-end-end-radius: var(--satwa-radius-sm);
}

.satwa-skip-link:focus-visible {
	inset-block-start: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto;
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
	}
}