/* ==========================================================================
   Base — Global defaults for html, body, typography, and links
   ========================================================================== */

html {
	background-color: var(--sc-bg);
	color: var(--sc-text-primary);
	font-family: var(--sc-font-body);
	font-size: 100%;
	font-weight: var(--sc-weight-normal);
	line-height: var(--sc-leading-normal);
	-webkit-font-smoothing: antialiased;
}

body {
	background-color: var(--sc-bg);
	color: var(--sc-text-primary);
	font-size: var(--sc-text-base);
	transition: background-color var(--sc-transition-normal) var(--sc-ease-default),
		color var(--sc-transition-normal) var(--sc-ease-default);
}

/* ── Headings ────────────────────────────────────────────────────────────── */

h1,
h2,
h3 {
	font-family: var(--sc-font-display);
	font-weight: var(--sc-weight-medium);
	line-height: var(--sc-leading-tight);
	letter-spacing: var(--sc-tracking-tight);
	color: var(--sc-text-primary);
}

h4,
h5,
h6 {
	font-family: var(--sc-font-body);
	font-weight: var(--sc-weight-medium);
	line-height: var(--sc-leading-tight);
	color: var(--sc-text-primary);
}

h1 {
	font-size: var(--sc-text-2xl);
}

h2 {
	font-size: var(--sc-text-xl);
}

h3 {
	font-size: var(--sc-text-lg);
}

h4 {
	font-size: var(--sc-text-base);
}

/* ── Links ───────────────────────────────────────────────────────────────── */

a {
	color: var(--sc-accent-text);
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.15em;
	transition: text-decoration-color var(--sc-transition-fast) var(--sc-ease-default),
		color var(--sc-transition-fast) var(--sc-ease-default);
}

a:hover {
	text-decoration-color: currentColor;
}

a:focus-visible {
	outline: none;
	box-shadow: var(--sc-focus-ring);
	border-radius: var(--sc-radius-sm);
}

/* ── Body text ───────────────────────────────────────────────────────────── */

p + p {
	margin-top: var(--sc-space-md);
}

small {
	font-size: var(--sc-text-sm);
	color: var(--sc-text-secondary);
}

strong {
	font-weight: var(--sc-weight-semibold);
}

/* ── Selection ───────────────────────────────────────────────────────────── */

::selection {
	background-color: var(--sc-accent-subtle);
	color: var(--sc-text-primary);
}

/* ── Focus visible ───────────────────────────────────────────────────────── */

:focus-visible {
	outline: none;
	box-shadow: var(--sc-focus-ring);
}

/* Elements that manage their own focus styling */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	box-shadow: none;
}

/* ── SVG icon defaults ───────────────────────────────────────────────────── */
/* Inline SVGs used as icons must default to stroke-only (no black fill).
   Specific sizes are set per-component. This prevents unstyled SVGs from
   rendering as large solid black shapes. */

svg.icon,
button svg,
a svg,
.tab svg,
.nav svg {
	fill: none;
	stroke: currentColor;
	overflow: visible;
}