@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");

@import "tailwindcss";
@plugin "tailwindcss-animate";
@plugin "@tailwindcss/typography";
@custom-variant dark (&:is(.dark *));

@theme {
	--font-sans: "Roboto", sans-serif;
	--font-mono: "JetBrains Mono", monospace;
}

body {
	@apply m-0;
	font-family: var(--font-sans), var(--font-mono);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
code {
	font-family: var(--font-mono);
	max-width: 100% !important;
}
:root {
	--background: oklch(0.9885 0.0057 84.5659);
	--foreground: oklch(0.366 0.0251 49.6085);
	--card: oklch(0.9686 0.0091 78.2818);
	--card-foreground: oklch(0.366 0.0251 49.6085);
	--popover: oklch(0.9686 0.0091 78.2818);
	--popover-foreground: oklch(0.366 0.0251 49.6085);
	--primary: oklch(0.5553 0.1455 48.9975);
	--primary-foreground: oklch(1 0 0);
	--secondary: oklch(0.8276 0.0752 74.44);
	--secondary-foreground: oklch(0.4444 0.0096 73.639);
	--muted: oklch(0.9363 0.0218 83.2637);
	--muted-foreground: oklch(0.5534 0.0116 58.0708);
	--accent: oklch(0.9 0.05 74.9889);
	--accent-foreground: oklch(0.4444 0.0096 73.639);
	--destructive: oklch(0.4437 0.1613 26.8994);
	--destructive-foreground: oklch(1 0 0);
	--border: oklch(0.8866 0.0404 89.6994);
	--input: oklch(0.8866 0.0404 89.6994);
	--ring: oklch(0.5553 0.1455 48.9975);
	--chart-1: oklch(0.5553 0.1455 48.9975);
	--chart-2: oklch(0.5534 0.0116 58.0708);
	--chart-3: oklch(0.5538 0.1207 66.4416);
	--chart-4: oklch(0.5534 0.0116 58.0708);
	--chart-5: oklch(0.6806 0.1423 75.834);
	--sidebar: oklch(0.9363 0.0218 83.2637);
	--sidebar-foreground: oklch(0.366 0.0251 49.6085);
	--sidebar-primary: oklch(0.5553 0.1455 48.9975);
	--sidebar-primary-foreground: oklch(1 0 0);
	--sidebar-accent: oklch(0.5538 0.1207 66.4416);
	--sidebar-accent-foreground: oklch(1 0 0);
	--sidebar-border: oklch(0.8866 0.0404 89.6994);
	--sidebar-ring: oklch(0.5553 0.1455 48.9975);
	--font-sans: Oxanium, sans-serif;
	--font-serif: Merriweather, serif;
	--font-mono: Fira Code, monospace;
	--radius: 0.3rem;
	--shadow-2xs: 0px 2px 3px 0px hsl(28 18% 25% / 0.09);
	--shadow-xs: 0px 2px 3px 0px hsl(28 18% 25% / 0.09);
	--shadow-sm:
		0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 1px 2px -1px
		hsl(28 18% 25% / 0.18);
	--shadow:
		0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 1px 2px -1px
		hsl(28 18% 25% / 0.18);
	--shadow-md:
		0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 2px 4px -1px
		hsl(28 18% 25% / 0.18);
	--shadow-lg:
		0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 4px 6px -1px
		hsl(28 18% 25% / 0.18);
	--shadow-xl:
		0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 8px 10px -1px
		hsl(28 18% 25% / 0.18);
	--shadow-2xl: 0px 2px 3px 0px hsl(28 18% 25% / 0.45);
	--tracking-normal: 0em;
	--spacing: 0.25rem;
}

.dark {
	--background: oklch(0.2161 0.0061 56.0434);
	--foreground: oklch(0.9699 0.0013 106.4238);
	--card: oklch(0.2685 0.0063 34.2976);
	--card-foreground: oklch(0.9699 0.0013 106.4238);
	--popover: oklch(0.2685 0.0063 34.2976);
	--popover-foreground: oklch(0.9699 0.0013 106.4238);
	--primary: oklch(0.7049 0.1867 47.6044);
	--primary-foreground: oklch(1 0 0);
	--secondary: oklch(0.4444 0.0096 73.639);
	--secondary-foreground: oklch(0.9232 0.0026 48.7171);
	--muted: oklch(0.2685 0.0063 34.2976);
	--muted-foreground: oklch(0.7161 0.0091 56.259);
	--accent: oklch(0.3598 0.0497 229.3202);
	--accent-foreground: oklch(0.9232 0.0026 48.7171);
	--destructive: oklch(0.5771 0.2152 27.325);
	--destructive-foreground: oklch(1 0 0);
	--border: oklch(0.3741 0.0087 67.5582);
	--input: oklch(0.3741 0.0087 67.5582);
	--ring: oklch(0.7049 0.1867 47.6044);
	--chart-1: oklch(0.7049 0.1867 47.6044);
	--chart-2: oklch(0.6847 0.1479 237.3225);
	--chart-3: oklch(0.7952 0.1617 86.0468);
	--chart-4: oklch(0.7161 0.0091 56.259);
	--chart-5: oklch(0.5534 0.0116 58.0708);
	--sidebar: oklch(0.2685 0.0063 34.2976);
	--sidebar-foreground: oklch(0.9699 0.0013 106.4238);
	--sidebar-primary: oklch(0.7049 0.1867 47.6044);
	--sidebar-primary-foreground: oklch(1 0 0);
	--sidebar-accent: oklch(0.6847 0.1479 237.3225);
	--sidebar-accent-foreground: oklch(0.2839 0.0734 254.5378);
	--sidebar-border: oklch(0.3741 0.0087 67.5582);
	--sidebar-ring: oklch(0.7049 0.1867 47.6044);
	--font-sans: Oxanium, sans-serif;
	--font-serif: Merriweather, serif;
	--font-mono: Fira Code, monospace;
	--radius: 0.3rem;
	--shadow-2xs: 0px 2px 3px 0px hsl(0 0% 5% / 0.09);
	--shadow-xs: 0px 2px 3px 0px hsl(0 0% 5% / 0.09);
	--shadow-sm:
		0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 1px 2px -1px hsl(0 0% 5% / 0.18);
	--shadow:
		0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 1px 2px -1px hsl(0 0% 5% / 0.18);
	--shadow-md:
		0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 2px 4px -1px hsl(0 0% 5% / 0.18);
	--shadow-lg:
		0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 4px 6px -1px hsl(0 0% 5% / 0.18);
	--shadow-xl:
		0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 8px 10px -1px hsl(0 0% 5% / 0.18);
	--shadow-2xl: 0px 2px 3px 0px hsl(0 0% 5% / 0.45);
}

@theme inline {
	--color-background: var(--background);
	--color-foreground: var(--foreground);
	--color-card: var(--card);
	--color-card-foreground: var(--card-foreground);
	--color-popover: var(--popover);
	--color-popover-foreground: var(--popover-foreground);
	--color-primary: var(--primary);
	--color-primary-foreground: var(--primary-foreground);
	--color-secondary: var(--secondary);
	--color-secondary-foreground: var(--secondary-foreground);
	--color-muted: var(--muted);
	--color-muted-foreground: var(--muted-foreground);
	--color-accent: var(--accent);
	--color-accent-foreground: var(--accent-foreground);
	--color-destructive: var(--destructive);
	--color-destructive-foreground: var(--destructive-foreground);
	--color-border: var(--border);
	--color-input: var(--input);
	--color-ring: var(--ring);
	--color-chart-1: var(--chart-1);
	--color-chart-2: var(--chart-2);
	--color-chart-3: var(--chart-3);
	--color-chart-4: var(--chart-4);
	--color-chart-5: var(--chart-5);
	--color-sidebar: var(--sidebar);
	--color-sidebar-foreground: var(--sidebar-foreground);
	--color-sidebar-primary: var(--sidebar-primary);
	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
	--color-sidebar-accent: var(--sidebar-accent);
	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
	--color-sidebar-border: var(--sidebar-border);
	--color-sidebar-ring: var(--sidebar-ring);

	--font-sans: var(--font-sans);
	--font-mono: var(--font-mono);
	--font-serif: var(--font-serif);

	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);

	--shadow-2xs: var(--shadow-2xs);
	--shadow-xs: var(--shadow-xs);
	--shadow-sm: var(--shadow-sm);
	--shadow: var(--shadow);
	--shadow-md: var(--shadow-md);
	--shadow-lg: var(--shadow-lg);
	--shadow-xl: var(--shadow-xl);
	--shadow-2xl: var(--shadow-2xl);
}
@theme inline {
	--color-background: var(--background);
	--color-foreground: var(--foreground);
	--color-card: var(--card);
	--color-card-foreground: var(--card-foreground);
	--color-popover: var(--popover);
	--color-popover-foreground: var(--popover-foreground);
	--color-primary: var(--primary);
	--color-primary-foreground: var(--primary-foreground);
	--color-secondary: var(--secondary);
	--color-secondary-foreground: var(--secondary-foreground);
	--color-muted: var(--muted);
	--color-muted-foreground: var(--muted-foreground);
	--color-accent: var(--accent);
	--color-accent-foreground: var(--accent-foreground);
	--color-destructive: var(--destructive);
	--color-destructive-foreground: var(--destructive-foreground);
	--color-border: var(--border);
	--color-input: var(--input);
	--color-ring: var(--ring);
	--color-chart-1: var(--chart-1);
	--color-chart-2: var(--chart-2);
	--color-chart-3: var(--chart-3);
	--color-chart-4: var(--chart-4);
	--color-chart-5: var(--chart-5);
	--color-sidebar: var(--sidebar);
	--color-sidebar-foreground: var(--sidebar-foreground);
	--color-sidebar-primary: var(--sidebar-primary);
	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
	--color-sidebar-accent: var(--sidebar-accent);
	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
	--color-sidebar-border: var(--sidebar-border);
	--color-sidebar-ring: var(--sidebar-ring);

	--font-sans: "Roboto", sans-serif;
	--font-mono: "JetBrains Mono", monospace;
	--font-serif: "Roboto", sans-serif;

	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);

	--shadow-2xs: var(--shadow-2xs);
	--shadow-xs: var(--shadow-xs);
	--shadow-sm: var(--shadow-sm);
	--shadow: var(--shadow);
	--shadow-md: var(--shadow-md);
	--shadow-lg: var(--shadow-lg);
	--shadow-xl: var(--shadow-xl);
	--shadow-2xl: var(--shadow-2xl);
	--radius: 0.5rem;
	--tracking-tighter: calc(var(--tracking-normal) - 0.05em);
	--tracking-tight: calc(var(--tracking-normal) - 0.025em);
	--tracking-wide: calc(var(--tracking-normal) + 0.025em);
	--tracking-wider: calc(var(--tracking-normal) + 0.05em);
	--tracking-widest: calc(var(--tracking-normal) + 0.1em);
	--tracking-normal: var(--tracking-normal);
	--spacing: var(--spacing);
	--letter-spacing: var(--letter-spacing);
	--shadow-offset-y: var(--shadow-offset-y);
	--shadow-offset-x: var(--shadow-offset-x);
	--shadow-spread: var(--shadow-spread);
	--shadow-blur: var(--shadow-blur);
	--shadow-opacity: var(--shadow-opacity);
	--color-shadow-color: var(--shadow-color);
}

@layer base {
	* {
		@apply border-border outline-ring/50;
	}
	body {
		@apply bg-background text-foreground;
		letter-spacing: var(--tracking-normal);
	}

	/* Custom global scrollbar styles */
	::-webkit-scrollbar {
		@apply w-2.5 h-2.5;
	}

	::-webkit-scrollbar-track {
		@apply p-px;
		/* Assuming vertical scrollbar focus, adjust if horizontal is also primary */
	}

	::-webkit-scrollbar-thumb {
		@apply bg-border rounded-full;
	}

	/* For Firefox */
	html {
		scrollbar-width: thin;
		scrollbar-color: var(--border) transparent; /* thumb and track color */
	}
}

/* View Transition Fade Effect */
::view-transition-old(body),
::view-transition-new(body) {
	animation-duration: 0.3s;
	animation-timing-function: ease-in-out;
}

::view-transition-old(root) {
	animation-name: fade-out;
}

::view-transition-new(root) {
	animation-name: fade-in;
}

@keyframes fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.mermaid-width-mode > svg {
	max-width: 100%;
	height: auto;
}

.mermaid-height-mode > svg {
	max-width: none;
	max-height: 80vh;
}

::selection {
	background-color: var(--primary);
	color: var(--primary-foreground);
}

.scrollbar-none {
	scrollbar-width: none;
}
