:root {
	color-scheme: light;

	/* Brand */
	--color-bg: #f5f7fa;
	--color-surface: #ffffff;
	--color-surface-strong: #f8fafc;
	--color-surface-subtle: #f1f5f9;
	--color-header: #1a1f2e;
	--color-header-accent: #2d3748;
	--color-text: #24292e;
	--color-text-strong: #111827;
	--color-text-muted: #6b7280;
	--color-text-subtle: #9ca3af;
	--color-border: #e2e8f0;
	--color-border-strong: #bfdbfe;
	--color-link: #3b82f6;
	--color-link-strong: #1e40af;

	/* Semantic */
	--color-success: #16a34a;
	--color-success-soft: #68d391;
	--color-info: #2563eb;
	--color-warning: #d97706;
	--color-warning-soft: #fbbf24;
	--color-danger: #dc2626;
	--color-accent: #7c3aed;

	/* Code */
	--color-code-bg: #1e293b;
	--color-code-text: #e2e8f0;
	--color-code-keyword: #93c5fd;
	--color-code-string: #86efac;
	--color-code-number: #fde68a;

	/* Typography */
	--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, SF Mono, Consolas, 'Liberation Mono', Menlo, monospace;
	--text-xs: .75rem;
	--text-sm: .82rem;
	--text-md: .875rem;
	--text-lg: .95rem;
	--text-xl: 1rem;
	--text-2xl: 1.8rem;
	--weight-semibold: 600;
	--weight-bold: 700;
	--letter-wide: .5px;
	--letter-wider: .6px;
	--line-normal: 1.6;
	--line-code: 1.55;

	/* Spacing */
	--space-1: .2rem;
	--space-2: .3rem;
	--space-3: .45rem;
	--space-4: .5rem;
	--space-5: .6rem;
	--space-6: .7rem;
	--space-7: .75rem;
	--space-8: .9rem;
	--space-9: 1rem;
	--space-10: 1.25rem;
	--space-11: 1.5rem;
	--space-12: 2rem;
	--space-13: 2.5rem;
	--space-14: 4rem;

	/* Layout */
	--container-width: 980px;
	--radius-sm: 3px;
	--radius-md: 4px;
	--radius-lg: 6px;
	--radius-xl: 8px;
	--border-width: 1px;
	--border-width-accent: 3px;
	--shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
}

/* =============================
   Foundation / Reset
   ============================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body,
.app-shell {
	font-family: var(--font-sans);
	background: var(--color-bg);
	color: var(--color-text);
	line-height: var(--line-normal);
}

/* =============================
   Layout Primitives
   ============================= */
header,
.site-header {
	background: var(--color-header);
	color: var(--color-surface);
	padding: var(--space-12) var(--space-13);
}

header h1 { font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: -0.02em; }
header p { margin-top: var(--space-4); color: var(--color-text-subtle); font-size: var(--text-lg); }

.base-url,
.brand-chip {
	display: inline-block;
	margin-top: var(--space-6);
	background: var(--color-header-accent);
	color: var(--color-success-soft);
	padding: var(--space-2) var(--space-6);
	border-radius: var(--radius-md);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
}

	nav,
.site-nav {
	background: var(--color-surface);
	border-bottom: var(--border-width) solid var(--color-border);
	padding: var(--space-7) var(--space-13);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.site-nav a,
nav a {
	text-decoration: none;
	color: var(--color-link);
	font-size: var(--text-xs);
	padding: var(--space-1) var(--space-5);
	border: var(--border-width) solid var(--color-border-strong);
	border-radius: var(--radius-md);
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.site-nav a:hover,
nav a:hover {
	background: #eff6ff;
	border-color: #93c5fd;
}

main,
.content-shell {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: var(--space-12) var(--space-11) var(--space-14);
}

section,
.doc-card {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-xl);
	margin-bottom: var(--space-12);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

/* =============================
   Components
   ============================= */
.endpoint-header,
.doc-card-header {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-9) var(--space-11);
	border-bottom: var(--border-width) solid var(--color-border);
	flex-wrap: wrap;
}

.method,
.http-method {
	font-weight: var(--weight-bold);
	font-size: var(--text-xs);
	padding: var(--space-2) var(--space-6);
	border-radius: var(--radius-md);
	letter-spacing: var(--letter-wide);
	color: var(--color-surface);
	flex-shrink: 0;
}

.method.POST,
.http-method.POST { background: var(--color-info); }
.method.GET,
.http-method.GET { background: var(--color-success); }
.method.PUT,
.http-method.PUT { background: var(--color-warning); }
.method.PATCH,
.http-method.PATCH { background: var(--color-accent); }
.method.DELETE,
.http-method.DELETE { background: var(--color-danger); }

.endpoint-path,
.doc-code-path {
	font-family: var(--font-mono);
	font-size: var(--text-xl);
	color: var(--color-link-strong);
}

.endpoint-title,
.doc-card-title { font-size: var(--text-lg); color: var(--color-text-muted); }

.endpoint-body,
.doc-card-body {
	padding: var(--space-10) var(--space-11);
	display: grid;
	gap: var(--space-10);
}

.endpoint-description,
.doc-card-description {
	color: #374151;
	padding-inline: var(--space-4);
	margin-inline: calc(var(--space-4) * -1);
	margin-bottom: var(--space-5);
	line-height: var(--line-normal);
}

.section-label,
h3 {
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--letter-wider);
	color: var(--color-text-subtle);
	margin-bottom: var(--space-4);
}

.data-table,
table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-md);
}

.data-table th,
th {
	background: var(--color-surface-strong);
	text-align: left;
	padding: var(--space-4) var(--space-7);
	border: var(--border-width) solid var(--color-border);
	font-weight: var(--weight-semibold);
	color: #374151;
}

.data-table td,
td {
	padding: var(--space-3) var(--space-7);
	border: var(--border-width) solid var(--color-border);
	vertical-align: top;
}

.data-table td code,
.data-table th code,
td code,
th code {
	font-family: var(--font-mono);
	background: var(--color-surface-subtle);
	padding: var(--space-1) .3rem;
	border-radius: var(--radius-sm);
	font-size: .83rem;
}

.required-indicator,
.req {
	color: var(--color-danger);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
}

.code-block,
pre {
	background: var(--color-code-bg);
	color: var(--color-code-text);
	padding: var(--space-12) var(--space-10);
	border-radius: var(--radius-lg);
	font-size: var(--text-sm);
	overflow-x: auto;
	line-height: var(--line-code);
}

.code-block .kw,
pre .kw { color: var(--color-code-keyword); }
.code-block .str,
pre .str { color: var(--color-code-string); }
.code-block .num,
pre .num { color: var(--color-code-number); }

.alert {
	display: grid;
	gap: var(--space-3);
	padding: var(--space-5) var(--space-9);
	border-left: var(--border-width-accent) solid transparent;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-size: var(--text-md);
	line-height: var(--line-normal);
}

.alert__title {
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
}

.alert--info {
	background: #eff6ff;
	color: #1d4ed8;
	border-left-color: #60a5fa;
}

.alert--success {
	background: #ecfdf5;
	color: #166534;
	border-left-color: #4ade80;
}

.alert--warning {
	background: #fefce8;
	color: #92400e;
	border-left-color: var(--color-warning-soft);
}

.alert--danger {
	background: #fef2f2;
	color: #b91c1c;
	border-left-color: #f87171;
}

.two-column,
.cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-10);
}

@media (max-width: 640px) {
	.two-column,
	.cols { grid-template-columns: 1fr; }
	header,
	.site-header,
	nav,
	.site-nav { padding-left: var(--space-11); padding-right: var(--space-11); }
}

.callout,
.note {
	background: #fefce8;
	border-left: var(--border-width-accent) solid var(--color-warning-soft);
	padding: var(--space-5) var(--space-9);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-size: var(--text-md);
	color: #92400e;
}

footer,
.site-footer {
	text-align: center;
	padding: var(--space-11);
	color: var(--color-text-subtle);
	font-size: var(--text-xs);
}

/* =============================
   Utilities
   ============================= */
.stack {
	display: grid;
	gap: var(--space-10);
}

.surface {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
}

.muted {
	color: var(--color-text-muted);
}