html {
	/* Keep the browser/root canvas aligned with the footer at the end of the page.
	   This prevents a light flash/gap below the footer when mobile browser chrome
	   expands/collapses or the document reaches its scroll boundary. */
	background-color: var(--sw-color-navy);
	overscroll-behavior-y: none;
}

/**
 * Base styles (RTL safe)
 */
body {
	background-color: var(--sw-color-bg);
	overscroll-behavior-y: none;
	color: var(--sw-color-text);
	font-family: var(--sw-font-base);
	font-size: var(--sw-text-base);
	line-height: var(--sw-leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--sw-color-primary);
	font-weight: var(--sw-weight-bold);
	line-height: var(--sw-leading-tight);
	margin-block-start: 0;
	margin-block-end: var(--sw-space-4);
}

h1 { font-size: var(--sw-text-4xl); }
h2 { font-size: var(--sw-text-3xl); }
h3 { font-size: var(--sw-text-2xl); }
h4 { font-size: var(--sw-text-xl); }
h5 { font-size: var(--sw-text-lg); }
h6 { font-size: var(--sw-text-base); }

p {
	margin-block-start: 0;
	margin-block-end: var(--sw-space-4);
}

a {
	color: var(--sw-color-interactive);
	text-decoration: none;
	transition: color var(--sw-transition-duration) ease-in-out;
}

a:hover,
a:focus-visible {
	color: var(--sw-color-interactive-hover);
	text-decoration: underline;
}

a:focus-visible {
	outline: none;
	box-shadow: var(--sw-focus-ring);
	border-radius: var(--sw-radius-sm);
}

/* Typography Utilities */
.sw-text-lead {
	font-size: var(--sw-text-lg);
	color: var(--sw-color-text-muted);
}
.sw-text-small {
	font-size: var(--sw-text-sm);
}
.sw-text-xs {
	font-size: var(--sw-text-xs);
}

/* Container Utilities */
.sw-container,
.sw-container-narrow,
.sw-container-wide {
	margin-inline: auto;
	padding-inline: var(--sw-container-padding);
}

.sw-container { max-inline-size: var(--sw-container-width); }
.sw-container-narrow { max-inline-size: var(--sw-container-narrow); }
.sw-container-wide { max-inline-size: var(--sw-container-wide); }

/* Section Utilities */
.sw-section {
	padding-block: var(--sw-section-padding-y);
}

/* Grid Utility */
.sw-grid {
	display: grid;
	gap: var(--sw-space-6);
}