/* variables */
:root[joblist-layout] {
	--c-white: white;
	--c-black: black;
	--c-green: darkgreen;
	--c-hotgreen: #19a519;
	--c-gray: gray;
	--c-purple: violet;
	--c-whitesmoke: whitesmoke;
	--c-blue: #3b5fc0;
	--c-orange: orange;
	--c-social: rgb(255 255 0 / 50%), rgb(0 0 255 / 50%);

	--font-family: "IBM Plex Serif", serif;
	--line-height: 1.5;
	--s-font: 17px;
	--s: 1.5rem;
	--s-h0: 1rem;
	--s-h1: 1.7rem;
	--s-h2: 1.5rem;
	--s-h3: 1.3rem;
	--s-h4: 1.1rem;
	--s-favicon: calc(var(--s) * 1.5);
	--s-container: calc(var(--s) * 42);
	--s-border: 0.15rem;
	--s-border-radius: 0.2rem;
}
@media (prefers-color-scheme: dark) {
	:root[joblist-layout] {
		color-scheme: dark;
		--c-bg: #1e1e1e;
		--c-bg-alt: #191913f3;
		--c-fg: #dfdfd6;
		--c-fg--info: #9d9d9d;
		--c-link: oklch(0.712564 0.257662 265.758);
		--c-link--active: var(--c-purple);
		--c-link--visited: var(--c-hotgreen);
		--c-hr: slategray;
		--c-position: gray;
		--c-svg: white;
		--c-bg--company: black;
		--c-border: gray;
		--c-border--company: gray;
		--c-button: darkblue;

		/* Heatmap dark theme colors */
		--c-heatmap-bg: var(--c-bg-alt);
		--c-heatmap-border: #21262d;
		--c-heatmap-cell-0: #161b22;
		--c-heatmap-cell-1: #0e4429;
		--c-heatmap-cell-2: #006d32;
		--c-heatmap-cell-3: #26a641;
		--c-heatmap-cell-4: #39d353;
		--c-heatmap-stroke: rgba(240, 246, 252, 0.1);
		--c-heatmap-text: #7d8590;
	}
}
@media (prefers-color-scheme: light) {
	:root[joblist-layout] {
		color-scheme: light;
		--c-bg: white;
		--c-bg-alt: #f6f6f6;
		--c-fg: var(--c-black);
		--c-fg--info: gray;
		--c-link: var(--c-blue);
		--c-link--active: var(--c-green);
		--c-link--visited: var(--c-purple);
		--c-hr: lightgray;
		--c-position: gray;
		--c-svg: black;
		--c-bg--company: snow;
		--c-border: lightgray;
		--c-border--company: lightgray;
		--c-button: lightgray;

		/* Heatmap light theme colors */
		--c-heatmap-bg: var(--c-bg-alt);
		--c-heatmap-border: #d1d9e0;
		--c-heatmap-cell-0: #ebedf0;
		--c-heatmap-cell-1: #9be9a8;
		--c-heatmap-cell-2: #40c463;
		--c-heatmap-cell-3: #30a14e;
		--c-heatmap-cell-4: #216e39;
		--c-heatmap-stroke: rgba(27, 31, 35, 0.06);
		--c-heatmap-text: #656d76;
	}
}

@media (min-width: 60rem) {
	:root[joblist-layout] {
		--s-font: 19px;
	}
}

@media (min-width: 100rem) {
	:root[joblist-layout] {
		--s-font: 20px;
	}
}