/**
 * Light Blue Theme for prism.js
 * A cohesive light blue-focused color scheme with excellent contrast and readability
 * Light version of the duotone-sea theme
 */

/**
 * Balanced colour palette with high contrast and clear separation
 * --mono-1: #1E293B; // Dark blue-gray for main text (maximum contrast)
 * --mono-2: #475569; // Medium gray for secondary text  
 * --mono-3: #64748B; // Light gray for comments
 * --hue-1: #0891B2;  // Dark cyan for variables/functions/operators
 * --hue-2: #DC2626;  // Dark red for keywords
 * --hue-3: #B91C1C;  // Dark red for selectors
 * --hue-4: #0E7490;  // Dark cyan for strings
 * --hue-5: #7C3AED;  // Dark purple for properties/tags
 * --hue-5-2: #059669; // Dark green for numbers/constants
 * --hue-6: #7C3AED;  // Dark purple for URLs
 * --hue-6-2: #0891B2; // Dark cyan for operators
 * --syntax-fg: #1E293B;
 * --syntax-bg: #F8FAFC;
 * --syntax-gutter: #CBD5E1;
 * --syntax-guide: rgba(30, 41, 59, 0.1);
 * --syntax-accent: #3B82F6;
 * --syntax-selection-color: #DBEAFE;
 * --syntax-gutter-background-color-selected: #DBEAFE;
 * --syntax-cursor-line: rgba(59, 130, 246, 0.1);
 */

/* Ensure this theme takes precedence when enabled */
html:not(.dark) code[class*="language-"],
html:not(.dark) pre[class*="language-"] {
	background: #F8FAFC !important;
	color: #1E293B !important;
	text-shadow: none !important;
	font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	line-height: 1.5;
	-moz-tab-size: 2;
	-o-tab-size: 2;
	tab-size: 2;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

/* Selection */
html:not(.dark) code[class*="language-"]::-moz-selection,
html:not(.dark) code[class*="language-"] *::-moz-selection,
html:not(.dark) pre[class*="language-"] *::-moz-selection {
	background: #DBEAFE !important;
	color: inherit !important;
	text-shadow: none !important;
}

html:not(.dark) code[class*="language-"]::selection,
html:not(.dark) code[class*="language-"] *::selection,
html:not(.dark) pre[class*="language-"] *::selection {
	background: #DBEAFE !important;
	color: inherit !important;
	text-shadow: none !important;
}

/* Code blocks */
html:not(.dark) pre[class*="language-"] {
	padding: 1em;
	margin: 0.5em 0;
	overflow: auto;
	border-radius: 0.5em;
	border: 1px solid #E2E8F0 !important;
}

/* Inline code */
html:not(.dark) :not(pre) > code[class*="language-"] {
	padding: 0.2em 0.4em;
	border-radius: 0.3em;
	white-space: normal;
	background: #F1F5F9 !important;
	border: 1px solid #CBD5E1 !important;
}

/* Print */
@media print {
	html:not(.dark) code[class*="language-"],
	html:not(.dark) pre[class*="language-"] {
		text-shadow: none;
	}
}

html:not(.dark) .token.comment,
html:not(.dark) .token.prolog,
html:not(.dark) .token.cdata {
	color: #64748B !important;
	font-style: italic;
}

html:not(.dark) .token.doctype,
html:not(.dark) .token.punctuation,
html:not(.dark) .token.entity {
	color: #475569 !important;
}

html:not(.dark) .token.attr-name,
html:not(.dark) .token.class-name,
html:not(.dark) .token.boolean,
html:not(.dark) .token.constant,
html:not(.dark) .token.number,
html:not(.dark) .token.atrule {
	color: #0891B2 !important; /* Dark cyan for numbers/constants */
}

html:not(.dark) .token.keyword {
	color: #DC2626 !important; /* Dark red for keywords */
}

html:not(.dark) .token.property,
html:not(.dark) .token.tag,
html:not(.dark) .token.symbol,
html:not(.dark) .token.deleted,
html:not(.dark) .token.important {
	color: #B91C1C !important; /* Dark red for properties/tags */
}

html:not(.dark) .token.selector,
html:not(.dark) .token.string,
html:not(.dark) .token.char,
html:not(.dark) .token.builtin,
html:not(.dark) .token.inserted,
html:not(.dark) .token.regex,
html:not(.dark) .token.attr-value,
html:not(.dark) .token.attr-value > .token.punctuation {
	color: #0E7490 !important; /* Dark cyan for strings */
}

html:not(.dark) .token.variable,
html:not(.dark) .token.operator,
html:not(.dark) .token.function {
	color: #059669 !important; /* Dark green for variables/functions */
}

html:not(.dark) .token.url {
	color: #7C3AED !important; /* Dark purple for URLs */
}

/* HTML overrides */
html:not(.dark) .token.attr-value > .token.punctuation.attr-equals,
html:not(.dark) .token.special-attr > .token.attr-value > .token.value.css {
	color: #475569 !important;
}

/* CSS overrides */
html:not(.dark) .language-css .token.selector {
	color: #B91C1C !important; /* Dark red for selectors */
}

html:not(.dark) .language-css .token.property {
	color: #1E293B !important;
}

html:not(.dark) .language-css .token.function,
html:not(.dark) .language-css .token.url > .token.function {
	color: #0891B2 !important; /* Dark cyan for functions */
}

html:not(.dark) .language-css .token.url > .token.string.url {
	color: #059669 !important; /* Dark green for URLs */
}

html:not(.dark) .language-css .token.important,
html:not(.dark) .language-css .token.atrule .token.rule {
	color: #B91C1C !important; /* Dark red for important/atrules */
}

/* JS overrides */
html:not(.dark) .language-javascript .token.operator {
	color: #0891B2 !important; /* Dark cyan for operators */
}

html:not(.dark) .language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation {
	color: #0E7490 !important;
}

/* JSON overrides */
html:not(.dark) .language-json .token.operator {
	color: #475569 !important;
}

html:not(.dark) .language-json .token.null.keyword {
	color: #3B82F6 !important; /* Blue for null */
}

/* MD overrides */
html:not(.dark) .language-markdown .token.url,
html:not(.dark) .language-markdown .token.url > .token.operator,
html:not(.dark) .language-markdown .token.url-reference.url > .token.string {
	color: #475569 !important;
}

html:not(.dark) .language-markdown .token.url > .token.content {
	color: #DC2626 !important; /* Dark red for content */
}

html:not(.dark) .language-markdown .token.url > .token.url,
html:not(.dark) .language-markdown .token.url-reference.url {
	color: #0891B2 !important; /* Dark cyan for URLs */
}

html:not(.dark) .language-markdown .token.blockquote.punctuation,
html:not(.dark) .language-markdown .token.hr.punctuation {
	color: #64748B !important;
	font-style: italic;
}

html:not(.dark) .language-markdown .token.code-snippet {
	color: #059669 !important; /* Dark green for code snippets */
}

html:not(.dark) .language-markdown .token.bold .token.content {
	color: #3B82F6 !important; /* Blue for bold */
}

html:not(.dark) .language-markdown .token.italic .token.content {
	color: #7C3AED !important; /* Dark purple for italic */
}

html:not(.dark) .language-markdown .token.strike .token.content,
html:not(.dark) .language-markdown .token.strike .token.punctuation,
html:not(.dark) .language-markdown .token.list.punctuation,
html:not(.dark) .language-markdown .token.title.important > .token.punctuation {
	color: #B91C1C !important; /* Dark red for strike/list */
}

/* General */
html:not(.dark) .token.bold {
	font-weight: 600;
}

html:not(.dark) .token.comment,
html:not(.dark) .token.italic {
	font-style: italic;
}

html:not(.dark) .token.entity {
	cursor: help;
}

html:not(.dark) .token.namespace {
	opacity: 0.8;
}

/* Plugin overrides */
/* Selectors should have higher specificity than those in the plugins' default stylesheets */

/* Show Invisibles plugin overrides */
html:not(.dark) .token.token.tab:not(:empty):before,
html:not(.dark) .token.token.cr:before,
html:not(.dark) .token.token.lf:before,
html:not(.dark) .token.token.space:before {
	color: rgba(30, 41, 59, 0.1) !important;
	text-shadow: none;
}

/* Toolbar plugin overrides */
/* Space out all buttons and move them away from the right edge of the code block */
html:not(.dark) div.code-toolbar > .toolbar.toolbar > .toolbar-item {
	margin-right: 0.4em;
}

/* Styling the buttons */
html:not(.dark) div.code-toolbar > .toolbar.toolbar > .toolbar-item > button,
html:not(.dark) div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
html:not(.dark) div.code-toolbar > .toolbar.toolbar > .toolbar-item > span {
	background: #F1F5F9 !important;
	color: #475569 !important;
	padding: 0.2em 0.6em;
	border-radius: 0.4em;
	border: 1px solid #CBD5E1 !important;
	transition: all 0.2s ease;
}

html:not(.dark) div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
html:not(.dark) div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus,
html:not(.dark) div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
html:not(.dark) div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
html:not(.dark) div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
html:not(.dark) div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
	background: #E2E8F0 !important;
	color: #1E293B !important;
	border-color: #94A3B8 !important;
}

/* Line Highlight plugin overrides */
/* The highlighted line itself */
html:not(.dark) .line-highlight.line-highlight {
	background: rgba(59, 130, 246, 0.1) !important;
}

/* Default line numbers in Line Highlight plugin */
html:not(.dark) .line-highlight.line-highlight:before,
html:not(.dark) .line-highlight.line-highlight[data-end]:after {
	background: #F1F5F9 !important;
	color: #475569 !important;
	padding: 0.1em 0.6em;
	border-radius: 0.3em;
	box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
}

/* Hovering over a linkable line number (in the gutter area) */
/* Requires Line Numbers plugin as well */
html:not(.dark) pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before {
	background-color: rgba(59, 130, 246, 0.1) !important;
}

/* Line Numbers and Command Line plugins overrides */
/* Line separating gutter from coding area */
html:not(.dark) .line-numbers.line-numbers .line-numbers-rows,
html:not(.dark) .command-line .command-line-prompt {
	border-right-color: rgba(30, 41, 59, 0.1) !important;
}

/* Stuff in the gutter */
html:not(.dark) .line-numbers .line-numbers-rows > span:before,
html:not(.dark) .command-line .command-line-prompt > span:before {
	color: #CBD5E1 !important;
}

/* Match Braces plugin overrides */
/* Note: Outline colour is inherited from the braces */
html:not(.dark) .rainbow-braces .token.token.punctuation.brace-level-1,
html:not(.dark) .rainbow-braces .token.token.punctuation.brace-level-5,
html:not(.dark) .rainbow-braces .token.token.punctuation.brace-level-9 {
	color: #B91C1C !important; /* Dark red */
}

html:not(.dark) .rainbow-braces .token.token.punctuation.brace-level-2,
html:not(.dark) .rainbow-braces .token.token.punctuation.brace-level-6,
html:not(.dark) .rainbow-braces .token.token.punctuation.brace-level-10 {
	color: #059669 !important; /* Dark green */
}

html:not(.dark) .rainbow-braces .token.token.punctuation.brace-level-3,
html:not(.dark) .rainbow-braces .token.token.punctuation.brace-level-7,
html:not(.dark) .rainbow-braces .token.token.punctuation.brace-level-11 {
	color: #DC2626 !important; /* Dark red */
}

html:not(.dark) .rainbow-braces .token.token.punctuation.brace-level-4,
html:not(.dark) .rainbow-braces .token.token.punctuation.brace-level-8,
html:not(.dark) .rainbow-braces .token.token.punctuation.brace-level-12 {
	color: #7C3AED !important; /* Dark purple */
}

/* Diff Highlight plugin overrides */
/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */
html:not(.dark) pre.diff-highlight > code .token.token.deleted:not(.prefix),
html:not(.dark) pre > code.diff-highlight .token.token.deleted:not(.prefix) {
	background-color: rgba(220, 38, 38, 0.15) !important;
}

html:not(.dark) pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection,
html:not(.dark) pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection,
html:not(.dark) pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,
html:not(.dark) pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection {
	background-color: rgba(220, 38, 38, 0.25) !important;
}

html:not(.dark) pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection,
html:not(.dark) pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection,
html:not(.dark) pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection,
html:not(.dark) pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection {
	background-color: rgba(220, 38, 38, 0.25) !important;
}

html:not(.dark) pre.diff-highlight > code .token.token.inserted:not(.prefix),
html:not(.dark) pre > code.diff-highlight .token.token.inserted:not(.prefix) {
	background-color: rgba(5, 150, 105, 0.15) !important;
}

html:not(.dark) pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection,
html:not(.dark) pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection,
html:not(.dark) pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,
html:not(.dark) pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection {
	background-color: rgba(5, 150, 105, 0.25) !important;
}

html:not(.dark) pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,
html:not(.dark) pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection,
html:not(.dark) pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,
html:not(.dark) pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
	background-color: rgba(5, 150, 105, 0.25) !important;
}

/* Previewers plugin overrides */
/* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */
/* Border around popup */
html:not(.dark) .prism-previewer.prism-previewer:before,
html:not(.dark) .prism-previewer-gradient.prism-previewer-gradient div {
	border-color: #E2E8F0 !important;
}

/* Angle and time should remain as circles and are hence not included */
html:not(.dark) .prism-previewer-color.prism-previewer-color:before,
html:not(.dark) .prism-previewer-gradient.prism-previewer-gradient div,
html:not(.dark) .prism-previewer-easing.prism-previewer-easing:before {
	border-radius: 0.3em;
}

/* Triangles pointing to the code */
html:not(.dark) .prism-previewer.prism-previewer:after {
	border-top-color: #E2E8F0 !important;
}

html:not(.dark) .prism-previewer-flipped.prism-previewer-flipped.after {
	border-bottom-color: #E2E8F0 !important;
}

/* Background colour within the popup */
html:not(.dark) .prism-previewer-angle.prism-previewer-angle:before,
html:not(.dark) .prism-previewer-time.prism-previewer-time:before,
html:not(.dark) .prism-previewer-easing.prism-previewer-easing {
	background: #F1F5F9 !important;
}

/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */
/* For time, this is the alternate colour */
html:not(.dark) .prism-previewer-angle.prism-previewer-angle circle,
html:not(.dark) .prism-previewer-time.prism-previewer-time circle {
	stroke: #1E293B !important;
	stroke-opacity: 1;
}

/* Stroke colours of the handle, direction point, and vector itself */
html:not(.dark) .prism-previewer-easing.prism-previewer-easing circle,
html:not(.dark) .prism-previewer-easing.prism-previewer-easing path,
html:not(.dark) .prism-previewer-easing.prism-previewer-easing line {
	stroke: #1E293B !important;
}

/* Fill colour of the handle */
html:not(.dark) .prism-previewer-easing.prism-previewer-easing circle {
	fill: transparent;
}