/*
Ability Esports — Base styles.
Resets and base element defaults only, every value sourced from tokens.css.
No component styling here — see /docs/WORDPRESS-FOUNDATION.md for the
component CSS plan (button.css, card.css, etc.), built in a later Stage 5
prompt once real component markup exists to style.
*/

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

html {
	-webkit-text-size-adjust: 100%;
	background: var(--ae-color-bg-primary);
}

/*
!important is justified here, documented per this project's own explicit
"avoid !important unless there is a documented reason" allowance: Astra's
Customizer "Container Layout" setting (e.g. "Separate Containers") outputs
a body.ast-{layout}-container class whose specificity (0,1,1) always beats
a plain `body` element selector (0,0,1) regardless of stylesheet load
order. Our design system owns the page background unconditionally — it
must not silently depend on a specific, changeable Customizer setting to
render correctly (/docs/MASTER-ARCHITECTURE.md §6: the child theme owns
visual presentation).
*/
body {
	margin: 0;
	background: var(--ae-color-bg-primary) !important;
	color: var(--ae-color-text-primary);
	font-family: var(--ae-font-body);
	font-weight: var(--ae-weight-body);
	font-size: var(--ae-text-body);
	line-height: var(--ae-leading-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--ae-font-display);
	font-weight: var(--ae-weight-heading);
	line-height: var(--ae-leading-tight);
	color: var(--ae-color-text-primary);
	margin: 0 0 var(--ae-space-md) 0;
	max-width: var(--ae-measure-heading);
	overflow-wrap: break-word;
}

h1 {
	font-size: var(--ae-text-h1);
}

h2 {
	font-size: var(--ae-text-h2);
}

h3 {
	font-size: var(--ae-text-h3);
}

h4 {
	font-size: var(--ae-text-h4);
}

h5 {
	font-size: var(--ae-text-h5);
}

p {
	margin: 0 0 var(--ae-space-md) 0;
	max-width: var(--ae-measure-body);
}

a {
	color: var(--ae-color-brand-primary-bright);
	text-decoration-color: transparent;
	transition: text-decoration-color var(--ae-duration-fast) var(--ae-ease-standard);
}

a:hover {
	text-decoration-color: currentColor;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: var(--ae-border-focus);
	outline-offset: 2px;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

button {
	font-family: inherit;
	background: none;
	border: none;
	cursor: pointer;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
Every future animated rule gets its own scoped `prefers-reduced-motion`
override at the point it's introduced (the pattern already demonstrated in
/docs/DESIGN-TOKENS.md §10) — a blanket, project-wide override using
`!important` is not used here, consistent with the project's own explicit
anti-pattern rule (/docs/DESIGN-TOKENS.md §19).
*/