/* =============================================================================
 * base.css · Global resets and base element styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Defines core rules for body background/colors, ::selection, customized
 * scrollbars, and focus outlines inside the @layer base scope.
 * ========================================================================== */
@layer base {
	* {
		@apply border-border outline-ring/50;
	}

	html {
		/* Smooth scroll for anchor jumps (table of contents) */
		scroll-behavior: smooth;
		/* Prevent horizontal scroll from any overflowing child.
		   clip (not hidden) preserves position: sticky on descendants. */
		overflow-x: clip;
	}

	body {
		overflow-x: clip;
		background: var(--background);
		color: var(--foreground);
		font-family: var(--font-sans);
		font-feature-settings: "ss01", "cv11";
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	/* Enable smooth transitions only when explicitly toggling themes */
	.theme-transitioning,
	.theme-transitioning * {
		transition:
			background-color var(--duration-short) var(--ease-out) !important,
			color var(--duration-short) var(--ease-out) !important,
			border-color var(--duration-short) var(--ease-out) !important,
			box-shadow var(--duration-short) var(--ease-out) !important;
	}

	::selection {
		background: var(--accent-soft);
		color: var(--foreground);
	}

	/* Themed scrollbar - subtle, follows the surface ladder */
	::-webkit-scrollbar {
		width: 0.625rem;
		height: 0.625rem;
	}
	::-webkit-scrollbar-track {
		background: transparent;
	}
	::-webkit-scrollbar-thumb {
		background: var(--border-strong);
		border-radius: 999px;
		border: 0.125rem solid var(--background);
	}
	::-webkit-scrollbar-thumb:hover {
		background: var(--muted-foreground);
	}

	/* Firefox */
	* {
		scrollbar-width: thin;
		scrollbar-color: var(--border-strong) transparent;
	}

	/* Focus ring is consistent across all focusable elements */
	:where(button, a, input, textarea, select, [tabindex]):focus-visible {
		outline: none;
		box-shadow: var(--focus-ring);
		border-color: var(--accent);
	}
}