systems-obscure/src/styles/_variables.css

:root {
	--radius: 0.3rem;
	--background: oklch(1 0 0);
	--foreground: oklch(0.145 0 0);
	--card: oklch(1 0 0);
	--card-foreground: oklch(0.145 0 0);
	--popover: oklch(1 0 0);
	--popover-foreground: oklch(0.145 0 0);
	--primary: oklch(0.205 0 0);
	--primary-foreground: oklch(0.985 0 0);
	--secondary: oklch(0.97 0 0);
	--secondary-foreground: oklch(0.205 0 0);
	--muted: oklch(0.97 0 0);
	--muted-foreground: oklch(0.556 0 0);
	--accent: oklch(0.97 0 0);
	--accent-foreground: oklch(0.205 0 0);
	--destructive: oklch(0.577 0.245 27.325);
	--border: oklch(0.922 0 0);
	--input: oklch(0.922 0 0);
	--ring: oklch(0.708 0 0);
	--chart-1: oklch(0.646 0.222 41.116);
	--chart-2: oklch(0.6 0.118 184.704);
	--chart-3: oklch(0.398 0.07 227.392);
	--chart-4: oklch(0.828 0.189 84.429);
	--chart-5: oklch(0.769 0.188 70.08);
	--sidebar: oklch(0.985 0 0);
	--sidebar-foreground: oklch(0.145 0 0);
	--sidebar-primary: oklch(0.205 0 0);
	--sidebar-primary-foreground: oklch(0.985 0 0);
	--sidebar-accent: oklch(0.97 0 0);
	--sidebar-accent-foreground: oklch(0.205 0 0);
	--sidebar-border: oklch(0.922 0 0);
	--sidebar-ring: oklch(0.708 0 0);
	--font-monospaced: "Jetbrains Mono", monospace;
	--font-sansserif: "Inter", sans-serif;
}

/* .dark { */
/*   --background: oklch(0.145 0 0); */
/*   --foreground: oklch(0.985 0 0); */
/*   --card: oklch(0.205 0 0); */
/*   --card-foreground: oklch(0.985 0 0); */
/*   --popover: oklch(0.205 0 0); */
/*   --popover-foreground: oklch(0.985 0 0); */
/*   --primary: oklch(0.922 0 0); */
/*   --primary-foreground: oklch(0.205 0 0); */
/*   --secondary: oklch(0.269 0 0); */
/*   --secondary-foreground: oklch(0.985 0 0); */
/*   --muted: oklch(0.269 0 0); */
/*   --muted-foreground: oklch(0.708 0 0); */
/*   --accent: oklch(0.269 0 0); */
/*   --accent-foreground: oklch(0.985 0 0); */
/*   --destructive: oklch(0.704 0.191 22.216); */
/*   --border: oklch(1 0 0 / 10%); */
/*   --input: oklch(1 0 0 / 15%); */
/*   --ring: oklch(0.556 0 0); */
/*   --chart-1: oklch(0.488 0.243 264.376); */
/*   --chart-2: oklch(0.696 0.17 162.48); */
/*   --chart-3: oklch(0.769 0.188 70.08); */
/*   --chart-4: oklch(0.627 0.265 303.9); */
/*   --chart-5: oklch(0.645 0.246 16.439); */
/*   --sidebar: oklch(0.205 0 0); */
/*   --sidebar-foreground: oklch(0.985 0 0); */
/*   --sidebar-primary: oklch(0.488 0.243 264.376); */
/*   --sidebar-primary-foreground: oklch(0.985 0 0); */
/*   --sidebar-accent: oklch(0.269 0 0); */
/*   --sidebar-accent-foreground: oklch(0.985 0 0); */
/*   --sidebar-border: oklch(1 0 0 / 10%); */
/*   --sidebar-ring: oklch(0.556 0 0); */
/* } */

.dark {
	--background: oklch(0.2 0 0);
	/* Softer dark gray instead of 0.145 */
	--foreground: oklch(0.9 0 0);
	/* Softer off-white instead of 0.985 */
	--card: oklch(0.22 0 0);
	/* Slightly lighter card */
	--card-foreground: oklch(0.9 0 0);
	/* Match foreground */
	--popover: oklch(0.22 0 0);
	--popover-foreground: oklch(0.9 0 0);
	--primary: oklch(0.85 0 0);
	/* Less harsh white */
	--primary-foreground: oklch(0.22 0 0);
	--secondary: oklch(0.3 0 0);
	/* Lighter secondary */
	--secondary-foreground: oklch(0.9 0 0);
	--muted: oklch(0.3 0 0);
	--muted-foreground: oklch(0.65 0 0);
	/* Slightly softer */
	--accent: #a89984;

	--accent-foreground: oklch(0.9 0 0);
	--destructive: oklch(0.704 0.191 22.216);
	--border: oklch(1 0 0 / 15%);
	/* Slightly more visible borders */
	--input: oklch(1 0 0 / 18%);
	--ring: oklch(0.556 0 0);
	--chart-1: oklch(0.488 0.243 264.376);
	--chart-2: oklch(0.696 0.17 162.48);
	--chart-3: oklch(0.769 0.188 70.08);
	--chart-4: oklch(0.627 0.265 303.9);
	--chart-5: oklch(0.645 0.246 16.439);
	--sidebar: oklch(0.22 0 0);
	/* Match card */
	--sidebar-foreground: oklch(0.9 0 0);
	--sidebar-primary: oklch(0.488 0.243 264.376);
	--sidebar-primary-foreground: oklch(0.9 0 0);
	--sidebar-accent: oklch(0.3 0 0);
	--sidebar-accent-foreground: oklch(0.9 0 0);
	--sidebar-border: oklch(1 0 0 / 15%);
	--sidebar-ring: oklch(0.556 0 0);
}