code {
	background-color: var(--color-code-bg);
	padding: 2px 4px;
	border-radius: 3px;
	font-family:
		"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New",
		monospace;
}

pre {
	background-color: var(--color-pre-bg);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	padding: 16px;
	overflow-x: auto;

	code {
		background: none;
		padding: 0;
	}
}

/* Fallback syntax highlighting classes (when CSS Highlights API is not supported) */
.hl-property {
	color: rebeccapurple;
	font-weight: 600;
}

.hl-value {
	color: #d73a49;
}

.hl-unit {
	color: #032f62;
}

.hl-function {
	color: #6f42c1;
}

.hl-color {
	color: #e36209;
}

.hl-comment {
	color: #6a737d;
	font-style: italic;
}

.hl-string {
	color: #22863a;
}

.hl-selector {
	color: #6f42c1;
	font-weight: 600;
}

/* CSS Custom Highlight API styles */
::highlight(css-property) {
	color: rebeccapurple;
	font-weight: 600;
}

::highlight(css-value) {
	color: #d73a49;
}

::highlight(css-unit) {
	color: #032f62;
}

::highlight(css-function) {
	color: #6f42c1;
}

::highlight(css-color) {
	color: #e36209;
}

::highlight(css-comment) {
	color: #6a737d;
	font-style: italic;
}

::highlight(css-string) {
	color: #22863a;
}

::highlight(css-selector) {
	color: #6f42c1;
	font-weight: 600;
}

/* JavaScript Highlights API */
::highlight(js-comment) {
	color: #6a737d;
	font-style: italic;
}

::highlight(js-string) {
	color: #22863a;
}

::highlight(js-keyword) {
	color: #d73a49;
}

::highlight(js-number) {
	color: #032f62;
}

::highlight(js-function) {
	color: #6f42c1;
}

::highlight(js-property) {
	color: rebeccapurple;
}

/* JavaScript fallback classes */
.hl-keyword {
	color: #d73a49;
}

.hl-number {
	color: #032f62;
}

/* Dark Mode Syntax Highlighting */
@media (prefers-color-scheme: dark) {
	code {
		background-color: var(--color-code-bg);
		color: var(--color-text);
	}

	pre {
		background-color: var(--color-pre-bg);
		border-color: var(--color-border);
	}

	pre code {
		color: var(--color-text);
	}

	/* CSS Highlights API */
	::highlight(css-property) {
		color: #b794f6;
	}

	::highlight(css-value) {
		color: #ff7b9c;
	}

	::highlight(css-unit) {
		color: #7dd3fc;
	}

	::highlight(css-function) {
		color: #c4a7e7;
	}

	::highlight(css-color) {
		color: #fbbf24;
	}

	::highlight(css-comment) {
		color: #9ca3af;
		font-style: italic;
	}

	::highlight(css-string) {
		color: #6ee7b7;
	}

	::highlight(css-selector) {
		color: #c4a7e7;
	}

	/* JavaScript Highlights API - Dark */
	::highlight(js-comment) {
		color: #9ca3af;
		font-style: italic;
	}

	::highlight(js-string) {
		color: #6ee7b7;
	}

	::highlight(js-keyword) {
		color: #ff7b9c;
	}

	::highlight(js-number) {
		color: #7dd3fc;
	}

	::highlight(js-function) {
		color: #c4a7e7;
	}

	::highlight(js-property) {
		color: #b794f6;
	}

	/* Fallback classes */
	.hl-property {
		color: #b794f6;
	}

	.hl-value {
		color: #ff7b9c;
	}

	.hl-unit {
		color: #7dd3fc;
	}

	.hl-function {
		color: #c4a7e7;
	}

	.hl-color {
		color: #fbbf24;
	}

	.hl-comment {
		color: #9ca3af;
	}

	.hl-string {
		color: #6ee7b7;
	}

	.hl-selector {
		color: #c4a7e7;
	}

	.hl-keyword {
		color: #ff7b9c;
	}

	.hl-number {
		color: #7dd3fc;
	}
}