:root {
	/* Zine default palette */
	--light-yellow: #e5c07b;
	--dark-yellow: #d19a66;
	--blue: #61afef;
	--cyan: #56b6c2;
	--light-red: #e06c75;
	--dark-red: #be5046;
	--comment-gray: #5c6370;
	--magenta: #c678dd;

	/* Helix default palette */
	/* --white : "#ffffff"; */
	--helix-lilac: #dbbfef;
	--helix-lavender: #a4a0e8;
	--helix-comet: #5a5977;
	--helix-bossanova: #452859;
	--helix-midnight: #3b224c;
	--helix-revolver: #281733;

	--helix-silver: #cccccc;
	--helix-sirocco: #697c81;
	--helix-mint: #9ff28f;
	--helix-almond: #eccdba;
	--helix-chamois: #e8dca0;
	--helix-honey: #efba5d;

	--helix-apricot: #f47868;
	--helix-lightning: #ffcd1c;
	--helix-delta: #6f44f0;

	/* Helix bogster light theme */
	--bogster-orange: #dc7759;
	--bogster-yellow: #a58023;
	--bogster-red: #d32c5d;
	--bogster-blue: #59c0dc;
	--bogster-gray: #abb2bf;
	--bogster-lgreen: #7fdc59;
	--bogster-lred: #dc597f;
	--bogster-lblue: #289cbc;
	--bogster-teal: #23a580;

	--bogster-fg1: #161c23;
	--bogster-fg0: #232d38;

	--bogster-base00: #d7dbbb;
	--bogster-base0: #f6fbd6;
	--bogster-base1: #c7c7ba;
	--bogster-base2: #aaaa97;
	--bogster-base3: #415367;
	--bogster-base5: #627d9d;
}

@media (prefers-color-scheme: dark) {
	/* Dark Color Scheme */
	:root {
		--code-bg: var(--helix-midnight);
		--code-fg: var(--helix-lavender);
		--code-separator: var(--helix-comet);
		--code-keyword: var(--helix-almond);
		--code-type: white;
		--code-string: var(--helix-silver);
		--code-constant: white;
		--code-constant-numeric: var(--helix-chamois);
		--code-function: white;
		--code-comment: var(--helix-sirocco);
		--code-operator: var(--helix-lilac);
	}
}

@media (prefers-color-scheme: light) {
	/* Light Color Scheme */
	:root {
		--code-bg: var(--bogster-base0);
		--code-fg: var(--bogster-fg1);
		--code-separator: var(--bogster-base00);
		--code-keyword: var(--bogster-yellow);
		--code-type: var(--bogster-lred);
		--code-string: var(--bogster-teal);
		--code-constant: var(--bogster-teal);
		--code-constant-numeric: var(--bogster-blue);
		--code-function: var(--bogster-lblue);
		--code-comment: var(--bogster-base5);
		--code-operator: var(--bogster-orange);
		--code-operator-weight: bold;
	}
}

@font-face {
	font-family: BQN;
	src: url(BQN386.ttf) format("truetype");
}

code {
	color: var(--code-fg);

	/* Language-specific overrides */
	&:not([class]) {
		/* Use BQN font if no class is used */
		font-family: BQN, monospace;
	}

	.keyword {
		color: var(--code-keyword);
	}
	.type {
		color: var(--code-type);
	}
	.string {
		color: var(--code-string);
	}
	.numeric.constant {
		color: var(--code-constant-numeric);
	}
	.constant {
		color: var(--code-constant);
	}
	.function {
		color: var(--code-function);
	}
	.comment {
		color: var(--code-comment);
	}
	.operator {
		color: var(--code-operator);
		font-weight: var(--code-operator-weight);
	}
}

.grid-breakout pre:has(code) {
	border-top: 1px solid var(--code-separator);
	border-bottom: 1px solid var(--code-separator);
	padding: 10px 5px;
	background-color: var(--code-bg);
	overflow: auto;
	grid-column: full;
	grid-template-columns: subgrid;
	display: grid;
	counter-reset: line;
	tab-size: 4; /* just in case */
	code {
		grid-column-start: content;
	}
	/* Experimenting with automatically labeling the code. */ /*
  &::before { display: block; grid-column: content; }
  &:not(:has([class]))::before { content: "bqn"; } 
  &:has([class=kdl])::before { content: "KDL"; }
  &:has([class=zig])::before { content: "zig"; }
  */
}