/**
 * JOY-TEX Global Foundation
 *
 * Project-wide document and rendering foundations.
 */


/* =========================================================
   Box Model
   ========================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}


/* =========================================================
   Document
   ========================================================= */

html {
	font-family: var(--joy-font-sans);
}


/* =========================================================
   Body
   ========================================================= */

body {
	margin: 0;
	font-family: inherit;
	font-weight: var(--joy-font-weight-regular);
	color: var(--joy-color-text);
	background: var(--joy-color-canvas);
}


/* =========================================================
   Media
   ========================================================= */

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

/* =========================================================
   Accessibility — Keyboard Focus
   ========================================================= */

/*
 * Provide a clear default keyboard-focus indicator on light
 * contexts without suppressing native focus accessibility.
 *
 * Components placed on brand, dark, image or otherwise complex
 * surfaces must provide their own high-contrast focus treatment
 * when this default is insufficient.
 */
:focus-visible {
	outline: 2px solid var(--joy-color-brand);
	outline-offset: 3px;
}


/* =========================================================
   Accessibility — Reduced Motion
   ========================================================= */

/*
 * Respect the user's reduced-motion preference at document level.
 *
 * Component-specific animation and transition behavior remains
 * the responsibility of the component that introduces motion.
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}