/* =====================================================================
   Snaproll v2 — base reset + typography
   ---------------------------------------------------------------------
   Body/html defaults, link/button reset, font smoothing. Anything that
   "every v2 page needs" goes here. Component styles live in separate
   files (added in later phases).

   ⚠ Import order: tokens.css → THIS FILE → component files
   ===================================================================== */

@import url("./tokens.css");

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--v2-font-ui);
	font-size: var(--v2-body);
	color: var(--v2-ink);
	background: var(--v2-canvas);
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Headings — tight negative letter-spacing, no margin reset wars */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--v2-ink);
}
h1 { font-size: var(--v2-h-1); letter-spacing: -0.03em; }
h2 { font-size: var(--v2-h-2); letter-spacing: -0.025em; }
h3 { font-size: var(--v2-h-3); }

/* Display heading for landing hero only */
.v2-h-display {
	font-size: var(--v2-h-display);
	letter-spacing: -0.04em;
	line-height: 1.05;
	font-weight: 800;
}

/* Italic accent for hero phrases (Fraunces) — apply via class */
.v2-accent-italic {
	font-family: var(--v2-font-accent);
	font-style: italic;
	font-weight: 500;
}

/* Decorative handwriting (Caveat) — for the paper-register hero illo */
.v2-handwriting {
	font-family: var(--v2-font-hand);
	font-weight: 600;
}

/* Mono helper — for schema tags, IDs, timestamps, version strings */
.v2-mono {
	font-family: var(--v2-font-mono);
	font-size: var(--v2-xs);
	letter-spacing: 0;
}

p { margin: 0; }

a {
	color: inherit;
	text-decoration: none;
}
a.v2-link {
	color: var(--v2-blue);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
a.v2-link:hover { color: var(--v2-blue-deep); }

button {
	font-family: inherit;
	cursor: pointer;
	border: 0;
	background: transparent;
	padding: 0;
	color: inherit;
}

input, textarea, select {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

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

/* Focus ring — applies to all interactive surfaces unless overridden */
:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(42, 111, 219, 0.18);
	border-radius: var(--v2-r-1);
}

/* Subtle text-selection colour matching brand */
::selection {
	background: rgba(42, 111, 219, 0.18);
	color: var(--v2-ink);
}