@charset "UTF-8";

/**
 * Global foundation.
 *
 * Phase 2 attaches sl-design-system to the body through inc/cocoon.php.
 * Keeping the scope explicit prevents these rules from leaking into admin UI.
 */

.sl-design-system {
	color-scheme: dark;
	color: var(--sl-color-text-primary);
	font-family: var(--sl-font-sans);
	font-size: var(--sl-font-size-md);
	line-height: var(--sl-line-height-body);
	background: var(--sl-color-bg);
}

.sl-design-system *,
.sl-design-system *::before,
.sl-design-system *::after {
	box-sizing: border-box;
}

.sl-design-system :where(a) {
	color: var(--sl-color-link);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
	transition: color var(--sl-motion-fast) var(--sl-ease-standard);
}

.sl-design-system :where(a:hover) {
	color: var(--sl-color-brand);
}

.sl-design-system :where(button, a, input, select, textarea):focus-visible {
	outline: 2px solid var(--sl-color-brand);
	outline-offset: 2px;
}

.sl-design-system :where(img, video) {
	max-width: 100%;
	height: auto;
}

.sl-design-system ::selection {
	color: var(--sl-color-on-brand);
	background: var(--sl-color-brand);
}