/**
 * JoinGrove documentation visual design system.
 * Applied via markdown.styles in the IDE preview and reusable in web/PWA hubs.
 *
 * Palette: grove green accent (#2d8659), forest (#1a2e24), background #1e1e1e
 * Tokens: resources/docs/docs-tokens.json
 * Generated: 01/09/2026
 */

:root {
	--jg-docs-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
	--jg-docs-font-size-body: 15px;
	--jg-docs-line-height: 1.6;
	--jg-docs-h1-size: 30px;
	--jg-docs-h2-size: 22px;
	--jg-docs-h3-size: 17px;
	--jg-docs-max-width: 768px;

	--jg-docs-forest: #1a2e24;
	--jg-docs-accent: #2d8659;
	--jg-docs-accent-hover: #4ade80;
	--jg-docs-highlight: #86efac;

	--jg-docs-text: #e8e8e8;
	--jg-docs-text-muted: #9ca3af;
	--jg-docs-bg: #1e1e1e;
	--jg-docs-code-bg: #252326;
	--jg-docs-border: #2a2a2a;
	--jg-docs-table-stripe: rgba(45, 134, 89, 0.08);

	--jg-docs-section-concepts: #2d8659;
	--jg-docs-section-reference: #3b82f6;
	--jg-docs-section-setup: #f59e0b;
	--jg-docs-section-code: #8b5cf6;
	--jg-docs-section-connect: #4ade80;
}

/* Light markdown preview */
body.vscode-light.vscode-body {
	--jg-docs-text: #1a1a1a;
	--jg-docs-text-muted: #6b7280;
	--jg-docs-bg: #ffffff;
	--jg-docs-code-bg: #f3f4f6;
	--jg-docs-border: #e5e7eb;
	--jg-docs-table-stripe: rgba(45, 134, 89, 0.06);
	--jg-docs-accent-hover: #2d8659;
}

/* High contrast (matches onboardingThemes hcDark / hcLight) */
body.vscode-high-contrast.vscode-body {
	--jg-docs-accent: #3ff23f;
	--jg-docs-accent-hover: #3ff23f;
	--jg-docs-border: #6fc3df;
	--jg-docs-text-muted: #cccccc;
	--jg-docs-section-concepts: #3ff23f;
	--jg-docs-section-reference: #6fc3df;
	--jg-docs-section-setup: #ffcc00;
	--jg-docs-section-code: #d7ba7d;
	--jg-docs-section-connect: #3ff23f;
}

body.vscode-body {
	font-family: var(--jg-docs-font-family);
	font-size: var(--jg-docs-font-size-body);
	line-height: var(--jg-docs-line-height);
	color: var(--jg-docs-text);
	background-color: var(--jg-docs-bg);
}

body.vscode-body .markdown-body,
.docs-root {
	font-family: var(--jg-docs-font-family);
	font-size: var(--jg-docs-font-size-body);
	line-height: var(--jg-docs-line-height);
	color: var(--jg-docs-text);
	background-color: var(--jg-docs-bg);
	max-width: var(--jg-docs-max-width);
	margin: 0 auto;
	padding: 2rem 1.5rem;
	box-sizing: border-box;
}

body.vscode-body .markdown-body h1,
.docs-root h1 {
	font-size: var(--jg-docs-h1-size);
	font-weight: 600;
	margin: 0 0 1rem;
	line-height: 1.25;
	color: var(--jg-docs-text);
	border-bottom: 2px solid var(--jg-docs-accent);
	padding-bottom: 0.5rem;
}

/* Section hierarchy — standard JoinGrove doc template headings */
body.vscode-body .markdown-body h2,
.docs-root h2 {
	font-size: var(--jg-docs-h2-size);
	font-weight: 600;
	margin: 2.25rem 0 0.85rem;
	padding: 0.5rem 0 0.5rem 0.85rem;
	border-bottom: 1px solid var(--jg-docs-border);
	border-left: 4px solid var(--jg-docs-accent);
}

body.vscode-body .markdown-body h2#key-concepts,
.docs-root h2#key-concepts {
	border-left-color: var(--jg-docs-section-concepts);
	background: linear-gradient(90deg, rgba(45, 134, 89, 0.12), transparent);
}

body.vscode-body .markdown-body h2#api--reference,
.docs-root h2#api--reference {
	border-left-color: var(--jg-docs-section-reference);
	background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), transparent);
}

body.vscode-body .markdown-body h2#setup--installation,
.docs-root h2#setup--installation {
	border-left-color: var(--jg-docs-section-setup);
	background: linear-gradient(90deg, rgba(245, 158, 11, 0.1), transparent);
}

body.vscode-body .markdown-body h2#code-examples,
.docs-root h2#code-examples {
	border-left-color: var(--jg-docs-section-code);
	background: linear-gradient(90deg, rgba(139, 92, 246, 0.1), transparent);
}

body.vscode-body .markdown-body h2#how-it-connects,
.docs-root h2#how-it-connects {
	border-left-color: var(--jg-docs-section-connect);
	background: linear-gradient(90deg, rgba(74, 222, 128, 0.12), transparent);
}

body.vscode-body .markdown-body h3,
.docs-root h3 {
	font-size: var(--jg-docs-h3-size);
	font-weight: 500;
	margin: 1.5rem 0 0.5rem;
	color: var(--jg-docs-text);
}

/* Source / generated attribution callout */
body.vscode-body .markdown-body blockquote,
.docs-root blockquote {
	color: var(--jg-docs-text-muted);
	font-size: 14px;
	margin: 0 0 1.5rem;
	padding: 0.65rem 0 0.65rem 1rem;
	border-left: 3px solid var(--jg-docs-accent);
	background: rgba(45, 134, 89, 0.06);
	border-radius: 0 4px 4px 0;
}

body.vscode-body .markdown-body a,
.docs-root a {
	color: var(--jg-docs-accent-hover);
	text-decoration: none;
	font-weight: 500;
}

body.vscode-body .markdown-body a:hover,
.docs-root a:hover {
	text-decoration: underline;
	color: var(--jg-docs-highlight);
}

body.vscode-body .markdown-body code,
.docs-root code {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: var(--jg-docs-code-bg);
	padding: 0.15em 0.35em;
	border-radius: 4px;
	border: 1px solid var(--jg-docs-border);
}

/* Full-width code blocks with syntax-highlight friendly background */
body.vscode-body .markdown-body pre,
.docs-root pre {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background: var(--jg-docs-code-bg);
	padding: 1rem 1.15rem;
	border-radius: 6px;
	overflow-x: auto;
	border: 1px solid var(--jg-docs-border);
	margin: 1rem 0 1.25rem;
}

body.vscode-body .markdown-body pre code,
.docs-root pre code {
	background: none;
	border: none;
	padding: 0;
	font-size: 13px;
	line-height: 1.5;
}

/* Tables — clear headers, aligned columns, subtle striping */
body.vscode-body .markdown-body table,
.docs-root table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0 1.25rem;
	font-size: 14px;
	table-layout: auto;
}

body.vscode-body .markdown-body th,
body.vscode-body .markdown-body td,
.docs-root th,
.docs-root td {
	border: 1px solid var(--jg-docs-border);
	padding: 0.55rem 0.8rem;
	text-align: left;
	vertical-align: top;
}

body.vscode-body .markdown-body th,
.docs-root th {
	background: var(--jg-docs-code-bg);
	font-weight: 600;
	color: var(--jg-docs-text);
	border-bottom: 2px solid var(--jg-docs-accent);
}

body.vscode-body .markdown-body tbody tr:nth-child(even),
.docs-root tbody tr:nth-child(even) {
	background: var(--jg-docs-table-stripe);
}

body.vscode-body .markdown-body ul,
body.vscode-body .markdown-body ol,
.docs-root ul,
.docs-root ol {
	margin: 0.5rem 0 1rem;
	padding-left: 1.5rem;
}

body.vscode-body .markdown-body li,
.docs-root li {
	margin: 0.35rem 0;
}

body.vscode-body .markdown-body li strong,
.docs-root li strong {
	font-weight: 600;
	color: var(--jg-docs-text);
}

body.vscode-body .markdown-body hr,
.docs-root hr {
	border: none;
	border-top: 1px solid var(--jg-docs-border);
	margin: 2rem 0;
}

/* Table of contents / grouped nav lists */
body.vscode-body .markdown-body strong,
.docs-root strong {
	font-weight: 600;
}