:root {
    --color-green: oklch(0.63 0.2 142);
    --color-red: oklch(0.63 0.2 31);
    --color-blue: oklch(0.63 0.2 240);
	--color-mid-grey: oklch(50% 0 0);

	--color-canvas: color-mix(in oklab, oklch(98% 0 0) 100%, var(--color-blue) 15%);     /* Neutral background */
	--color-ink: oklch(15% 0.001 0);        /* Primary text */
	--background-gradient: linear-gradient(190deg, color-mix(in oklab, var(--color-blue) 30%, var(--color-canvas)), transparent, transparent), var(--color-canvas);
	--color-link: color-mix(in oklab, var(--color-blue) 50%, var(--color-ink) 50%);
	--color-neutral: color-mix(in oklab, var(--color-blue) 50%, var(--color-canvas) 50%);
	--color-negative: color-mix(in oklab, var(--color-red) 50%, var(--color-canvas) 50%);
	--color-positive: color-mix(in oklab, var(--color-green) 50%, var(--color-canvas) 50%);

	--shadow-color: color-mix(in oklab, var(--color-ink) 15%, transparent);
	--shadow-sm: 1px 1px 3px var(--shadow-color);
	--shadow-md: 4px 4px 12px var(--shadow-color);
}

@media (prefers-color-scheme: dark) {
	:root {

	--color-canvas: color-mix(in oklab, oklch(18% 0 0) 100%, var(--color-blue) 10%);    /* Dark neutral */
	--color-ink: oklch(90% 0.001 0);       /* Light text */
	--background-gradient: linear-gradient(10deg, color-mix(in oklab, var(--color-blue) 30%, var(--color-canvas)), transparent, transparent), var(--color-canvas);
  }
}