/**
 * Base document styles and accessibility affordances.
 */

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	background-color: var(--surface-dark);
	color: var(--text-on-dark);
	font-family: var(--alt-font-body);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* Avoids a single word stranded on its own line without the reflow cost of balancing. */
	text-wrap: pretty;
}

/**
 * Focus.
 *
 * A visible focus ring is not negotiable: it is how a keyboard visitor knows where they are.
 * 2 px at a 3 px offset, per Web Brand System section 8.5.
 *
 * The ring is Signal on dark (measured 6.25:1 against ink) but INK on light: Signal against
 * paper measures 2.83:1, under the 3:1 WCAG 1.4.11 minimum for a non-text indicator. The
 * brand system anticipates exactly this - "on light background where Signal is insufficient,
 * use an ink outline plus Signal secondary cue" - so the secondary cue is the thickened
 * signal-dark underline on links below.
 */
/*
 * One rule, because the ring colour is a semantic token that each region redefines: Signal on
 * dark, Ink on light. The light value is not a preference - Signal on paper measures 2.83:1,
 * under the 3:1 WCAG 1.4.11 minimum for a non-text indicator.
 */
:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: var(--focus-width) solid var(--alt-focus-color);
	outline-offset: var(--focus-offset);
}

/* Links carry the design system's underline metrics and take the accent on hover. */
a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--alt-accent);
}

/* Secondary Signal cue on focus, without a shadow: the underline thickens and takes the accent. */
a:focus-visible {
	text-decoration-thickness: 2px;
	text-decoration-color: var(--alt-accent);
}

/* Browsers that lack :focus-visible still get a ring rather than nothing. */
:focus:not(:focus-visible) {
	outline: none;
}

/* Skip link: off screen until focused, then a plain block at the top of the page. */
.alt-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	padding: var(--alt-space-2) var(--alt-space-3);
	background-color: var(--alt-ink);
	color: var(--alt-paper);
	font-family: var(--alt-font-mono);
	font-size: 0.875rem;
	text-decoration: none;
	transform: translateY(-101%);
}

.alt-skip-link:focus {
	transform: translateY(0);
}

/* Visually hidden but available to assistive technology. Matches core's screen-reader-text
   so markup can use either name. */
.alt-sr-only,
.screen-reader-text {
	position: absolute !important; /* Compatibility: must beat layout rules on any parent. */
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.alt-sr-only:focus,
.screen-reader-text:focus {
	position: static !important; /* Compatibility: pairs with the rule above. */
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

::selection {
	background-color: var(--alt-signal);
	color: var(--alt-ink);
}

hr {
	height: 0;
	margin: var(--alt-space-5) 0;
	border: 0;
	border-top: var(--alt-hairline) solid var(--alt-hairline-color);
}

/**
 * First-reveal motion.
 *
 * The design system allows exactly one entrance: opacity plus a 12 px rise, once, on first
 * appearance. Elements start visible and are only hidden once the observer has taken over, so a
 * visitor without JavaScript never meets an invisible page.
 */
.alt-reveal {
	opacity: 1;
}

.js-reveal-ready .alt-reveal {
	opacity: 0;
	transform: translateY(var(--reveal-offset));
	transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard);
}

.js-reveal-ready .alt-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal-ready .alt-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}