/**
 * CFUL 2026 — Base
 *
 * A small modern reset plus base element styles, built entirely on the
 * custom properties defined in tokens.css (loaded immediately before
 * this file — see inc/enqueue.php). No raw colors/sizes here.
 *
 * Note: the `.screen-reader-text` / `.cful-skip-link` accessibility
 * utilities used by the skip link in header.php already live in
 * assets/css/header.css, so they are not duplicated here.
 */

/* -------------------------------------------------------------------- */
/* Box model reset                                                      */
/* -------------------------------------------------------------------- */

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

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

body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd,
ul, ol {
	margin: 0;
}

ul,
ol {
	padding: 0;
}

/* -------------------------------------------------------------------- */
/* Document + body defaults                                             */
/* -------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	min-height: 100vh;
	text-rendering: optimizeLegibility;
}

/* -------------------------------------------------------------------- */
/* Headings — editorial serif, tight leading                            */
/* -------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-serif);
	font-weight: var(--fw-semibold);
	line-height: var(--leading-tight);
}

h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
h4, h5, h6 { font-size: var(--text-sm); }

p {
	line-height: var(--leading-normal);
}

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

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

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

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

/* -------------------------------------------------------------------- */
/* Forms — inherit typography instead of UA defaults                    */
/* -------------------------------------------------------------------- */

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
}

/* -------------------------------------------------------------------- */
/* Focus + selection                                                    */
/* -------------------------------------------------------------------- */

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

::selection {
	background: var(--color-primary);
	color: var(--color-primary-contrast);
}

/* -------------------------------------------------------------------- */
/* Reduced motion                                                       */
/* -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}
}