/**
 * base.css — elements, type scale, links, focus, reduced motion.
 *
 * Rule (theme-plan.md §2.3): only var(--at-*) and var(--att-*) may appear as
 * values here. Permitted literals: 0, 1px/2px hairlines, 100%, breakpoints,
 * unitless line-height numbers already carried by tokens, and font weights.
 */

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

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

body {
	margin: 0;
	background-color: var(--att-surface-page);
	color: var(--at-color-text);
	font-family: var(--att-font-ui);
	font-size: var(--at-size-base);
	font-weight: var(--at-weight-regular);
	line-height: var(--at-leading-normal);
	-webkit-font-smoothing: antialiased;
}

/* --- Headings -------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--at-space-4);
	color: var(--at-ink-800);
	font-weight: var(--at-weight-heading);
	text-wrap: balance;
}

/* Heading-to-content rhythm (design-polish-plan.md P1.4): 24px after an h2,
 * 16px after an h3 and below. */
h2 {
	margin-bottom: var(--at-space-5);
}

h1,
h2 {
	font-family: var(--att-font-display);
	letter-spacing: var(--att-display-tracking);
}

h3,
h4,
h5,
h6 {
	font-family: var(--att-font-ui);
	letter-spacing: 0;
}

h1 {
	font-size: var(--at-size-3xl);
	line-height: var(--att-display-leading);
}

h2 {
	font-size: var(--at-size-2xl);
	line-height: var(--at-leading-snug);
}

h3 {
	font-size: var(--at-size-xl);
	line-height: var(--at-leading-snug);
}

h4 {
	font-size: var(--at-size-lg);
	line-height: var(--at-leading-snug);
}

h5,
h6 {
	font-size: var(--at-size-base);
	line-height: var(--at-leading-snug);
}

/* --- Text ------------------------------------------------------------ */

p,
ul,
ol,
dl,
figure,
table,
blockquote,
pre {
	margin: 0 0 var(--at-space-5);
}

p,
li,
dd,
dt {
	max-width: var(--at-measure);
}

.att-lead {
	max-width: var(--at-measure);
	font-family: var(--att-font-display);
	font-size: var(--att-lead-size);
	font-weight: var(--at-weight-regular);
	line-height: var(--at-leading-normal);
	/* Muted, one step below body (design-polish-plan.md P1.3) — the heading
	 * carries the claim, the lead supports it. 6.6:1, still AA at 20px. */
	color: var(--at-color-text-muted);
}

.att-eyebrow {
	margin: 0 0 var(--at-space-3);
	color: var(--at-neutral-600);
	font-family: var(--att-font-ui);
	font-size: var(--att-eyebrow-size);
	font-weight: var(--at-weight-bold);
	line-height: var(--at-leading-snug);
	letter-spacing: var(--att-eyebrow-tracking);
	text-transform: uppercase;
}

.att-small,
small,
figcaption {
	font-size: var(--at-size-xs);
	line-height: var(--at-leading-normal);
	color: var(--at-color-text-muted);
}

.att-mono,
code,
kbd,
samp,
pre {
	font-family: var(--at-font-mono);
	font-size: var(--at-size-sm);
	line-height: var(--at-leading-normal);
	overflow-wrap: anywhere;
	word-break: normal;
}

.att-mono {
	color: var(--at-color-text-muted);
}

strong,
b {
	font-weight: var(--at-weight-bold);
}

hr {
	height: 0;
	margin: var(--at-space-7) 0;
	border: 0;
	border-top: var(--at-rule);
}

blockquote {
	margin-inline: 0;
	padding-left: var(--at-space-5);
	border-left: var(--at-border-strong) solid var(--at-stamp-600);
	font-family: var(--att-font-display);
	font-size: var(--att-lead-size);
}

/* --- Links ----------------------------------------------------------- */

a {
	color: var(--at-color-link);
	text-decoration: underline;
	text-underline-offset: var(--at-space-1);
	transition: color var(--at-duration-fast) var(--at-ease);
}

a:hover {
	color: var(--at-ink-800);
}

/* --- Focus (design-system.md §6) ------------------------------------- */

:focus {
	outline: var(--at-focus-ring);
	outline-offset: var(--at-focus-offset);
}

:focus:not(:focus-visible) {
	outline: 0;
}

:focus-visible {
	outline: var(--at-focus-ring);
	outline-offset: var(--at-focus-offset);
}

/* --- Media ----------------------------------------------------------- */

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

img {
	border: 0;
}

/* --- Lists ----------------------------------------------------------- */

ul,
ol {
	padding-left: var(--at-space-5);
}

li {
	margin-bottom: var(--at-space-2);
}

.att-list-plain {
	padding-left: 0;
	list-style: none;
}

/* --- Forms ----------------------------------------------------------- */

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

input[type="search"],
input[type="text"],
input[type="email"],
textarea,
select {
	min-height: var(--att-tap-min);
	padding: var(--att-btn-pad-y) var(--at-space-4);
	/* 1.4.11: control boundary, not a decorative rule. See theme-tokens.css. */
	border: var(--att-control-border);
	border-radius: var(--att-btn-radius);
	background-color: var(--att-surface-card);
	color: var(--at-color-text);
	max-width: 100%;
}

label {
	display: inline-block;
	margin-bottom: var(--at-space-2);
	font-weight: var(--at-weight-medium);
}

/* --- Tables ---------------------------------------------------------- */

table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--att-font-ui);
}

caption {
	margin-bottom: var(--at-space-4);
	color: var(--at-color-text-muted);
	font-size: var(--at-size-sm);
	text-align: left;
}

th,
td {
	padding: var(--at-space-3) var(--at-space-4);
	border-bottom: var(--at-rule);
	text-align: left;
	vertical-align: top;
}

th {
	font-weight: var(--at-weight-medium);
	color: var(--at-ink-800);
}

/* --- Screen-reader + skip link (GeneratePress ships the markup) ------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus,
.att-skip-link:focus {
	position: fixed !important;
	top: var(--at-space-2);
	left: var(--at-space-2);
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: var(--att-btn-pad-y) var(--att-btn-pad-x);
	border-radius: var(--att-btn-radius);
	background-color: var(--att-surface-inverse);
	color: var(--att-surface-inverse-fg);
	font-weight: var(--at-weight-medium);
	text-decoration: underline;
	box-shadow: var(--at-shadow-lg);
}

/* --- Motion ---------------------------------------------------------- */

/*
 * The token file already zeroes --at-duration-* under prefers-reduced-motion,
 * and every transition in this theme is expressed in those variables. This
 * block is the belt-and-braces for anything GeneratePress or the block editor
 * injects. No keyframe animation, parallax or auto-advancing carousel exists
 * anywhere in this theme.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}