/*
 * Solarized theme (Ethan Schoonover) with automatic light/dark selection
 * based on the prefers-color-scheme media query.
 *
 * Must be listed after cgit.css, e.g.
 *
 *   css=/cgit.css
 *   css=/solarized.css
 */

:root {
	--sol-base03: #002b36;
	--sol-base02: #073642;
	--sol-base01: #586e75;
	--sol-base00: #657b83;
	--sol-base0:  #839496;
	--sol-base1:  #93a1a1;
	--sol-base2:  #eee8d5;
	--sol-base3:  #fdf6e3;

	--sol-yellow:  #b58900;
	--sol-orange:  #cb4b16;
	--sol-red:     #dc322f;
	--sol-magenta: #d33682;
	--sol-violet:  #6c71c4;
	--sol-blue:    #268bd2;
	--sol-cyan:    #2aa198;
	--sol-green:   #859900;

	--sol-canvas: var(--sol-base3);
	--sol-panel: var(--sol-base2);
	--sol-body: var(--sol-base00);
	--sol-emph: var(--sol-base01);
	--sol-muted: var(--sol-base0);
	--sol-secondary: var(--sol-base1);
	--sol-shade: var(--sol-base03);
	--sol-page: var(--sol-panel);

	--sol-tint-soft: 18%;
	--sol-tint: 25%;
	--sol-tint-strong: 45%;

	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--sol-canvas: var(--sol-base03);
		--sol-panel: var(--sol-base02);
		--sol-body: var(--sol-base0);
		--sol-emph: var(--sol-base1);
		--sol-muted: var(--sol-base00);
		--sol-secondary: var(--sol-base01);
		--sol-shade: var(--sol-base3);

		--sol-tint-soft: 30%;
		--sol-tint: 35%;
		--sol-tint-strong: 55%;
	}
}

body:has(> div#cgit) {
	margin: 0;
	background-color: var(--sol-page);
}

div#cgit {
	--bg: var(--sol-canvas);
	--bg-zebra: color-mix(in srgb, var(--sol-panel) 40%, var(--sol-canvas));
	--bg-hl: var(--sol-panel);
	--bg-hl2: color-mix(in srgb, var(--sol-panel) 85%, var(--sol-shade));
	--fg: var(--sol-body);
	--fg-strong: var(--sol-emph);
	--fg-mid: var(--sol-body);
	--fg-mute: var(--sol-muted);
	--fg-dim: var(--sol-secondary);
	--fg-faint: color-mix(in srgb, var(--sol-secondary) 65%, var(--sol-canvas));
	--fg-faintest: color-mix(in srgb, var(--sol-secondary) 45%, var(--sol-canvas));
	--fg-on-tint: var(--sol-emph);
	--fg-linenum: var(--sol-secondary);
	--border: var(--sol-panel);
	--border-mid: var(--sol-secondary);
	--border-dark: var(--sol-muted);
	--border-strong: var(--sol-emph);

	--red: var(--sol-red);
	--red-mid: color-mix(in srgb, var(--sol-red) 75%, var(--sol-shade));
	--red-dark: color-mix(in srgb, var(--sol-red) 55%, var(--sol-shade));
	--green: var(--sol-green);
	--green-mid: color-mix(in srgb, var(--sol-green) 70%, var(--sol-shade));
	--green-dark: color-mix(in srgb, var(--sol-green) 50%, var(--sol-shade));
	--blue: var(--sol-blue);
	--blue-dark: color-mix(in srgb, var(--sol-blue) 70%, var(--sol-shade));

	--graph-col1: var(--sol-red);
	--graph-col2: var(--sol-green);
	--graph-col3: var(--sol-yellow);
	--graph-col4: var(--sol-blue);
	--graph-col5: var(--sol-magenta);
	--graph-col6: var(--sol-cyan);

	--graph-add-bg: var(--sol-green);
	--graph-rem-bg: var(--sol-red);

	--notes-bg: color-mix(in srgb, var(--sol-yellow) var(--sol-tint-soft), var(--sol-canvas));
	--notes-border: var(--sol-yellow);
	--add-bg: color-mix(in srgb, var(--sol-green) var(--sol-tint), var(--sol-canvas));
	--add-bg-dark: color-mix(in srgb, var(--sol-green) var(--sol-tint-strong), var(--sol-canvas));
	--del-bg: color-mix(in srgb, var(--sol-red) var(--sol-tint), var(--sol-canvas));
	--del-bg-dark: color-mix(in srgb, var(--sol-red) var(--sol-tint-strong), var(--sol-canvas));
	--changed-bg: color-mix(in srgb, var(--sol-yellow) var(--sol-tint), var(--sol-canvas));
	--changed-bg-dark: color-mix(in srgb, var(--sol-yellow) var(--sol-tint-strong), var(--sol-canvas));
	--hunk-bg: color-mix(in srgb, var(--sol-blue) var(--sol-tint), var(--sol-canvas));

	--deco-branch-bg: color-mix(in srgb, var(--sol-green) var(--sol-tint-soft), var(--sol-canvas));
	--deco-branch-border: var(--sol-green);
	--deco-tag-bg: color-mix(in srgb, var(--sol-yellow) var(--sol-tint-soft), var(--sol-canvas));
	--deco-tag-border: var(--sol-yellow);
	--deco-tag-annotated-bg: color-mix(in srgb, var(--sol-orange) var(--sol-tint-soft), var(--sol-canvas));
	--deco-tag-annotated-border: var(--sol-yellow);
	--deco-remote-bg: color-mix(in srgb, var(--sol-violet) var(--sol-tint-soft), var(--sol-canvas));
	--deco-remote-border: var(--sol-violet);
	--deco-other-bg: color-mix(in srgb, var(--sol-red) var(--sol-tint-soft), var(--sol-canvas));
	--deco-other-border: var(--sol-red);

	--syn-keyword: var(--sol-emph);
	--syn-keyword-alt: var(--sol-blue);
	--syn-type: var(--blue-dark);
	--syn-string: var(--sol-red);
	--syn-string-alt: var(--sol-green);
	--syn-escape: var(--sol-magenta);
	--syn-comment: var(--sol-secondary);
	--syn-number: var(--sol-yellow);
	--syn-preproc: var(--green-mid);
	--syn-operator: var(--sol-emph);
	--syn-interpolation: var(--sol-blue);
	--syn-linenum: var(--sol-secondary);
	--syn-error: var(--sol-red);
	--syn-mark-bg: color-mix(in srgb, var(--sol-yellow) var(--sol-tint), var(--sol-canvas));
}