/* ============================================================
   Joybunch — Base styles (reset + typography + a11y)
   v0.0.1 — element 2
   References tokens from tokens.css. No component styles in here.
   ============================================================ */

/* ---------- Box model + reset ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--height-header-mobile) + 8px);
}
@media (min-width: 768px) {
	html { scroll-padding-top: calc(var(--height-header-desktop) + 8px); }
}

body {
	margin: 0;
	font-family: var(--joy-font-body);
	font-size: var(--joy-text-md);
	line-height: 1.55;
	color: var(--color-text-primary);
	background: var(--color-bg-page);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	/* Sticky footer pattern — main flex-grows so footer sits at viewport bottom on short pages */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#joy-main { flex: 1 0 auto; }

/* Common element resets */
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
dl, dd, ol, ul, figure, hr, fieldset, legend {
	margin: 0;
}
ul, ol { padding: 0; list-style: none; }
img, svg, video, canvas, audio, iframe, embed, object {
	display: block;
	max-width: 100%;
}
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; padding: 0; }

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--joy-font-display);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.01em;
	color: var(--color-text-primary);
}
h1 { font-size: var(--joy-text-5xl); line-height: 1.05; }
h2 { font-size: var(--joy-text-4xl); }
h3 { font-size: var(--joy-text-3xl); }
h4 { font-size: var(--joy-text-2xl); }
h5 { font-size: var(--joy-text-lg); }
h6 { font-size: var(--joy-text-md); }

/* Body paragraph rhythm */
p { line-height: 1.55; }
p + p { margin-top: var(--joy-space-md); }

/* ---------- Links ---------- */
a {
	color: var(--color-link);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--color-link-hover); }

/* ---------- Text selection ---------- */
::selection {
	background: var(--color-selection-bg);
	color: var(--color-selection-text);
}
::-moz-selection {
	background: var(--color-selection-bg);
	color: var(--color-selection-text);
}

/* ---------- Scrollbar (warm-tinted, subtle) ---------- */
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
	background: var(--joy-gray-light);
	border-radius: var(--joy-radius-pill);
	border: 3px solid var(--color-bg-page);
}
*::-webkit-scrollbar-thumb:hover { background: var(--joy-graphite-soft); }
* { scrollbar-width: thin; scrollbar-color: var(--joy-gray-light) transparent; }

/* ---------- Focus-visible (a11y) ---------- */
:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
	border-radius: var(--joy-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Skip link (a11y) ---------- */
.joy-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.joy-sr-only:focus,
.joy-sr-only:focus-visible {
	position: fixed;
	top: 8px; left: 8px;
	z-index: var(--z-skip-link);
	width: auto; height: auto;
	clip: auto; margin: 0;
	padding: 8px 16px;
	background: var(--joy-coral);
	color: var(--color-text-inverse);
	border-radius: var(--joy-radius-sm);
	font-weight: 600;
}

/* ---------- Reduced motion ---------- */
@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;
	}
}

/* ---------- Utility ---------- */
[hidden] { display: none !important; }