/* ==========================================================================
   Minimal reset
   ========================================================================== */

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

* { margin: 0; }

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

body {
	min-height: 100vh;
	background: var(--bg-body);
	color: var(--body);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

/* Icons are stroke-based (Lucide) and set stroke="currentColor" inline.
   Never flood-fill them — a blanket fill turns outline icons into solid blobs.
   Fill-based SVGs (e.g. logo) declare their own fills per shape. */
svg { fill: none; }
/* Multicolour brand marks (e.g. the Google "G") ship their own fills. */
svg[data-icon="google"] path { fill: revert; }

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

button { cursor: pointer; background: none; border: 0; }

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

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

:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Respect the no-motion preference universally (theme also avoids transitions). */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}