/* ============================================================
   Active docs — global tokens + base reset.
   Neutral zinc system with serious red accent. Designed for
   density on the sidebar and breathing room in the article.
   ============================================================ */

:root {
	color-scheme: light;

	--c-bg: #ffffff;
	--c-bg-subtle: #fafafa;
	--c-bg-muted: #f4f4f5;
	--c-bg-emphasized: #e4e4e7;
	--c-bg-overlay: rgb(255 255 255 / 0.85);

	--c-fg: #18181b;
	--c-fg-muted: #52525b;
	--c-fg-subtle: #71717a;
	--c-fg-on-accent: #ffffff;

	--c-border: #e4e4e7;
	--c-border-muted: #f4f4f5;
	--c-border-strong: #d4d4d8;

	--c-accent: #b91c1c;
	--c-accent-emphasized: #991b1b;
	--c-accent-muted: #fef2f2;
	--c-accent-subtle: #fee2e2;
	--c-accent-fg: #ffffff;

	--c-link: #dc2626;
	--c-link-hover: #b91c1c;

	--c-code-bg: #f8fafc;
	--c-code-fg: #0f172a;
	--c-code-border: #e2e8f0;

	--c-shadow-color: 220 13% 10%;
	--shadow-sm: 0 1px 2px hsl(var(--c-shadow-color) / 0.04);
	--shadow-md: 0 4px 12px hsl(var(--c-shadow-color) / 0.06);
	--shadow-lg: 0 16px 32px -8px hsl(var(--c-shadow-color) / 0.12);

	--font-body:
		'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		'Helvetica Neue', sans-serif;
	--font-mono:
		ui-monospace, 'JetBrains Mono', 'Fira Code', 'SF Mono', SFMono-Regular, Menlo, Consolas,
		monospace;

	--size-topbar: 60px;
	--size-sidebar: 268px;
	--size-toc: 220px;
	--size-content: 760px;

	--r-sm: 4px;
	--r-md: 6px;
	--r-lg: 8px;
	--r-xl: 12px;
	--r-2xl: 16px;

	--ease: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme='dark'] {
	color-scheme: dark;

	--c-bg: #09090b;
	--c-bg-subtle: #111114;
	--c-bg-muted: #18181b;
	--c-bg-emphasized: #27272a;
	--c-bg-overlay: rgb(9 9 11 / 0.8);

	--c-fg: #fafafa;
	--c-fg-muted: #d4d4d8;
	--c-fg-subtle: #a1a1aa;

	--c-border: #27272a;
	--c-border-muted: #18181b;
	--c-border-strong: #3f3f46;

	--c-accent: #ef4444;
	--c-accent-emphasized: #f87171;
	--c-accent-muted: #2a0d10;
	--c-accent-subtle: #4c1414;
	--c-accent-fg: #ffffff;

	--c-link: #f87171;
	--c-link-hover: #fca5a5;

	--c-code-bg: #0f1115;
	--c-code-fg: #e2e8f0;
	--c-code-border: #1f2937;

	--c-shadow-color: 220 30% 4%;
	--shadow-sm: 0 1px 2px hsl(var(--c-shadow-color) / 0.4);
	--shadow-md: 0 4px 12px hsl(var(--c-shadow-color) / 0.5);
	--shadow-lg: 0 16px 32px -8px hsl(var(--c-shadow-color) / 0.7);
}

* {
	box-sizing: border-box;
}

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

html {
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	scroll-behavior: smooth;
	tab-size: 4;
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-fg);
	font-size: 16px;
	line-height: 1.65;
	font-feature-settings:
		'cv11' on,
		'ss01' on,
		'ss03' on;
}

a {
	color: var(--c-link);
	text-decoration: none;
	transition: color 120ms var(--ease);
}

a:hover {
	color: var(--c-link-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

button {
	font: inherit;
	cursor: pointer;
	color: inherit;
}

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

::selection {
	background: var(--c-accent-subtle);
	color: var(--c-fg);
}

[data-theme='dark'] ::selection {
	background: var(--c-accent-subtle);
	color: var(--c-accent-emphasized);
}

/* ── Code ─────────────────────────────────────────────────── */

code,
kbd,
pre,
samp {
	font-family: var(--font-mono);
	font-size: 0.9em;
	font-feature-settings: 'liga' 0;
}

:not(pre) > code {
	background: var(--c-code-bg);
	color: var(--c-code-fg);
	border: 1px solid var(--c-code-border);
	padding: 0.1em 0.4em;
	border-radius: var(--r-sm);
	font-size: 0.85em;
	white-space: nowrap;
}

kbd {
	background: var(--c-bg-muted);
	border: 1px solid var(--c-border);
	border-bottom-width: 2px;
	padding: 0.1em 0.4em;
	border-radius: var(--r-sm);
	font-size: 0.8em;
	color: var(--c-fg-muted);
}

pre {
	margin: 1.25rem 0;
	padding: 1rem 1.25rem;
	background: var(--c-code-bg);
	color: var(--c-code-fg);
	border: 1px solid var(--c-code-border);
	border-radius: var(--r-lg);
	overflow-x: auto;
	line-height: 1.6;
	font-size: 0.875rem;
}

pre code {
	background: transparent;
	border: none;
	padding: 0;
	white-space: pre;
	color: inherit;
	font-size: inherit;
}

/* ── Article typography ──────────────────────────────────── */

.article {
	max-width: var(--size-content);
	min-width: 0;
}

.article h1 {
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0 0 0.65rem;
	color: var(--c-fg);
}

.article > p.lead,
.article > .lead {
	font-size: 1.15rem;
	color: var(--c-fg-muted);
	line-height: 1.6;
	margin: 0 0 2.5rem;
	max-width: 62ch;
}

.article h2 {
	position: relative;
	font-size: 1.625rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 3.25rem 0 1rem;
	padding-top: 0.25rem;
	scroll-margin-top: calc(var(--size-topbar) + 1rem);
	color: var(--c-fg);
}

.article h2::before {
	content: '';
	display: block;
	width: 32px;
	height: 3px;
	background: var(--c-accent);
	border-radius: 2px;
	margin-bottom: 0.65rem;
}

.article h3 {
	position: relative;
	font-size: 1.15rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	margin: 2.25rem 0 0.75rem;
	scroll-margin-top: calc(var(--size-topbar) + 1rem);
	color: var(--c-fg);
}

.article h4 {
	font-size: 1rem;
	font-weight: 600;
	margin: 1.5rem 0 0.5rem;
	color: var(--c-fg);
}

.article :is(h2, h3, h4) .anchor {
	position: absolute;
	left: -1.25rem;
	top: 0.1em;
	color: var(--c-fg-subtle);
	opacity: 0;
	transition: opacity 120ms var(--ease);
	font-weight: 400;
	text-decoration: none;
	padding: 0 0.2rem;
}

.article :is(h2, h3, h4):hover .anchor,
.article :is(h2, h3, h4) .anchor:focus {
	opacity: 1;
}

.article p {
	margin: 0 0 1rem;
}

.article ul,
.article ol {
	margin: 0 0 1rem;
	padding-left: 1.5rem;
}

.article li {
	margin: 0.35rem 0;
}

.article li::marker {
	color: var(--c-fg-subtle);
}

.article li > ul,
.article li > ol {
	margin: 0.35rem 0;
}

.article hr {
	border: 0;
	border-top: 1px solid var(--c-border);
	margin: 3rem 0;
}

.article blockquote {
	margin: 1.25rem 0;
	padding: 0.5rem 1rem;
	border-left: 3px solid var(--c-accent);
	background: var(--c-bg-subtle);
	color: var(--c-fg-muted);
	border-radius: 0 var(--r-md) var(--r-md) 0;
}

.article table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: 0.9rem;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	overflow-y: hidden;
	background: var(--c-bg);
}

.article th,
.article td {
	padding: 0.65rem 0.95rem;
	text-align: left;
	border-bottom: 1px solid var(--c-border);
}

.article th {
	background: var(--c-bg-subtle);
	font-weight: 600;
	font-size: 0.78rem;
	color: var(--c-fg-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: 1px solid var(--c-border-strong);
}

.article tbody tr {
	transition: background-color 100ms var(--ease);
}

.article tbody tr:hover {
	background: var(--c-bg-subtle);
}

.article tr:last-child td {
	border-bottom: none;
}

.article a:not([class]) {
	color: var(--c-link);
	text-decoration: underline;
	text-decoration-color: color-mix(in oklab, var(--c-link) 35%, transparent);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.article a:not([class]):hover {
	color: var(--c-link-hover);
	text-decoration-color: currentColor;
}


/* ── Utility ─────────────────────────────────────────────── */

.muted {
	color: var(--c-fg-muted);
}

.subtle {
	color: var(--c-fg-subtle);
}

.tag {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.15em 0.55em;
	font-size: 0.75rem;
	font-weight: 500;
	border-radius: var(--r-sm);
	background: var(--c-accent-muted);
	color: var(--c-accent-emphasized);
	border: 1px solid var(--c-accent-subtle);
	letter-spacing: 0.01em;
}

.tag.gray {
	background: var(--c-bg-muted);
	color: var(--c-fg-muted);
	border-color: var(--c-border);
}

.kbd-inline {
	display: inline-flex;
	gap: 0.2em;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}