:root {
	--theme-color-gray-50: var(--color-zinc-50);
	--theme-color-gray-100: var(--color-zinc-100);
	--theme-color-gray-200: var(--color-zinc-200);
	--theme-color-gray-300: var(--color-zinc-300);
	--theme-color-gray-400: var(--color-zinc-400);
	--theme-color-gray-500: var(--color-zinc-500);
	--theme-color-gray-600: var(--color-zinc-600);
	--theme-color-gray-700: var(--color-zinc-700);
	--theme-color-gray-800: var(--color-zinc-800);
	--theme-color-gray-900: var(--color-zinc-900);
	--theme-color-gray-950: oklch(17.1% 0.005 285.823);

	--theme-color-background: var(--theme-color-gray-50);
	--theme-color-background-secondary: var(--theme-color-gray-100);

	--theme-color-foreground: var(--theme-color-gray-950);

	--theme-color-muted: var(--theme-color-gray-200);
	--theme-color-muted-foreground: var(--theme-color-gray-800);

	--theme-color-border: var(--theme-color-gray-200);

	--theme-color-primary: var(--theme-color-gray-900);
	--theme-color-primary-foreground: var(--theme-color-gray-50);
	--theme-color-primary-hover: var(--theme-color-gray-200);
	--theme-color-primary-active: oklch(90.88% 0.0103 311.17);

	--theme-color-secondary: oklch(79.45% 0.0183 293.05);
	--theme-color-secondary-foreground: oklch(93.17% 0.0074 312.3);

	--theme-color-accent: oklch(79.45% 0.0183 293.05);
	--theme-color-accent-foreground: oklch(93.17% 0.0074 312.3);
	--theme-color-accent-foreground: oklch(93.17% 0.0074 312.3);

	--theme-color-destructive: oklch(0.577 0.245 27.325);
	--theme-color-destructive-foreground: var(--theme-color-background);
	--theme-color-destructive-border: oklch(0.505 0.213 27.518);
}

.dark {
	--theme-color-background: var(--theme-color-gray-900);
	--theme-color-background-secondary: var(--theme-color-gray-950);

	--theme-color-foreground: oklch(94.97% 0.0027 286.35);

	--theme-color-muted: oklch(31.32% 0.0092 303.92);
	--theme-color-muted-foreground: oklch(76.91% 0.0144 299.72);

	--theme-color-destructive: oklch(0.577 0.245 27.325);
	--theme-color-destructive-foreground: var(--theme-color-foreground);

	/* Changed already */
	--theme-color-border: var(--theme-color-gray-800);

	--theme-color-primary: oklch(25.43% 0.0057 301.13);
	--theme-color-primary-hover: oklch(25.36% 0.0075 285.86);
	--theme-color-primary-active: var(--theme-color-gray-800);
	--theme-color-primary-foreground: oklch(17.64% 0.0124 226.09);

	--theme-color-secondary: oklch(38.49% 0.0867 54.98);
	--theme-color-secondary-foreground: oklch(93.28% 0.0457 164.64);

	--theme-color-accent: oklch(49.17% 0.0162 299.48);
	--theme-color-accent-foreground: oklch(96.3% 0.0026 286.21);
}

@theme inline {
	/* Gray */
	--color-gray-50: var(--theme-color-gray-50);
	--color-gray-100: var(--theme-color-gray-100);
	--color-gray-200: var(--theme-color-gray-200);
	--color-gray-300: var(--theme-color-gray-300);
	--color-gray-400: var(--theme-color-gray-400);
	--color-gray-500: var(--theme-color-gray-500);
	--color-gray-600: var(--theme-color-gray-600);
	--color-gray-700: var(--theme-color-gray-700);
	--color-gray-800: var(--theme-color-gray-800);
	--color-gray-900: var(--theme-color-gray-900);
	--color-gray-950: var(--theme-color-gray-950);

	/* Brand */
	--color-brand-50: var(--theme-color-brand-50);
	--color-brand-100: var(--theme-color-brand-100);
	--color-brand-200: var(--theme-color-brand-200);
	--color-brand-300: var(--theme-color-brand-300);
	--color-brand-400: var(--theme-color-brand-400);
	--color-brand-500: var(--theme-color-brand-500);
	--color-brand-600: var(--theme-color-brand-600);
	--color-brand-700: var(--theme-color-brand-700);
	--color-brand-800: var(--theme-color-brand-800);
	--color-brand-900: var(--theme-color-brand-900);
	--color-brand-950: var(--theme-color-brand-950);
	--color-brand: var(--theme-color-brand);
	--color-brand-hover: var(--theme-color-brand-hover);
	--color-brand-foreground: var(--theme-color-brand-foreground);
	--color-brand-border: var(--theme-color-brand-border);
	--color-brand-link: var(--theme-color-brand-link);
	--color-brand-link-hover: var(--theme-color-brand-link-hover);
	--color-brand-code-link: var(--theme-color-brand-code-link);
	--color-brand-code-link-hover: var(--theme-color-brand-code-link-hover);

	/* Background */
	--color-background: var(--theme-color-background);
	--color-background-secondary: var(--theme-color-background-secondary);

	/* Foreground */
	--color-foreground: var(--theme-color-foreground);

	/* Muted */
	--color-muted: var(--theme-color-muted);
	--color-muted-foreground: var(--theme-color-muted-foreground);

	/* Border */
	--color-border: var(--theme-color-border);

	/* Primary (grays) */
	--color-primary: var(--theme-color-primary);
	--color-primary-hover: var(--theme-color-primary-hover);
	--color-primary-active: var(--theme-color-primary-active);
	--color-primary-foreground: var(--theme-color-primary-foreground);

	/* Secondary */
	--color-secondary: var(--theme-color-secondary);
	--color-secondary-foreground: var(--theme-color-secondary-foreground);

	/* Accent */
	--color-accent: var(--theme-color-accent);
	--color-accent-foreground: var(--theme-color-accent-foreground);

	/* Destructive */
	--color-destructive: var(--theme-color-destructive);
	--color-destructive-foreground: var(--theme-color-destructive-foreground);
	--color-destructive-border: var(--theme-color-destructive-border);

	/* Fonts */
	--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
		"Liberation Mono";

	/* Text */
	--text-xxs: 0.625rem;
	--text-xs: 0.79rem;
	--text-sm: 0.889rem;
	--text-lg: 1.125rem;
	--text-xl: 1.266rem;
	--text-2xl: 1.424rem;
	--text-3xl: 1.602rem;
	--text-4xl: 1.802rem;
	--text-5xl: 2.027rem;
}

@layer base {
	* {
		border: var(--color-border);
		min-width: 0;
	}

	body {
		@apply bg-background text-foreground;
	}

	#content code:not(pre > code):not(.custom) {
		@apply text-foreground relative rounded-[5px] bg-gray-200/60 px-[0.375rem] py-[0.1875rem] font-mono text-[0.9em] dark:bg-gray-100/10;
	}

	a:has(code) {
		/* Style anchors with code differently */
		@apply rounded-[5px];
	}

	a>code {
		/* Style code inside of links differently */
		color: var(--color-brand-code-link) !important;
	}

	a:hover>code {
		/* Style code inside of links differently */
		color: var(--color-brand-code-link-hover) !important;
	}

	[data-theme*="github-dark"] {
		display: flex !important;
		flex-direction: column;
	}

	[data-rehype-pretty-code-figure] {
		@apply dark:bg-primary bg-background dark:ring-primary-hover dark:inset-shadow-muted/20 dark:inset-ring-muted/10 inset-ring-muted/20 ring-muted inset-shadow-muted/20 inset-ring inset-shadow-sm relative mb-4 mt-6 max-w-[760px] overflow-hidden rounded-xl pt-3 ring;
	}

	[data-rehype-pretty-code-figure] code {
		@apply grid min-w-0 break-words rounded-none border-0 p-0 text-sm md:text-base;
		counter-reset: line;
		box-decoration-break: clone;
	}

	[data-rehype-pretty-code-figure] [data-line] {
		@apply inline-block min-h-[1.5rem] w-full px-4 py-0.5;
	}

	[data-rehype-pretty-code-figure] [data-line-numbers] [data-line] {
		@apply px-2;
	}

	[data-rehype-pretty-code-figure] [data-line-numbers]>[data-line]::before {
		@apply text-xs text-zinc-50/40;
		counter-increment: line;
		content: counter(line);
		display: inline-block;
		width: 1.8rem;
		margin-right: 1.4rem;
		text-align: right;
	}

	[data-pre-copy-btn] {
		@apply absolute right-2 top-2;
	}

	[data-rehype-pretty-code-figure]:has([data-language="bash"]) [data-pre-copy-btn] {
		@apply top-[0.688rem];
	}

	[data-metadata] [data-pre-copy-btn] {
		@apply top-1;
	}

	[data-metadata] [data-pre-wrapper] {
		@apply pt-2;
	}

	[data-rehype-pretty-code-figure] .line--highlighted {
		@apply bg-gray-200/50 dark:bg-gray-100/5;
	}

	[data-rehype-pretty-code-figure] .line-highlighted span {
		@apply relative;
	}

	[data-rehype-pretty-code-figure] .chars--highlighted {
		@apply rounded-md border-zinc-700/70 bg-zinc-700/50 p-1;
	}

	.dark [data-rehype-pretty-code-figure] .chars--highlighted {
		@apply bg-zinc-900;
	}

	[data-rehype-pretty-code-title] {
		@apply text-muted-foreground leading-1 border-b border-gray-400/15 px-4 pb-4 pt-2 font-mono text-sm dark:border-gray-700/30;
	}

	[data-pre-wrapper] {
		@apply pb-3;
	}

	[data-rehype-pretty-code-figure]:not(:has([data-language="bash"])) {
		@apply pt-2;

		[data-pre-wrapper] {
			@apply pb-2;
		}
	}

	code[data-theme*="github-light github-dark"],
	code[data-theme*="github-light github-dark"] span {
		color: var(--shiki-light);
	}

	.dark {

		code[data-theme*="github-light github-dark"],
		code[data-theme*="github-light github-dark"] span {
			color: var(--shiki-dark);
		}
	}

	::selection {
		background-color: var(--color-muted);
		/* Change this to any color you want */
		/* color: white; Optional: change the text color when selected */
	}

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

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

	.dark {
		input::selection {
			background-color: var(--color-background-secondary);
		}

		code::selection {
			background-color: var(--color-background-secondary);
		}
	}
}

@layer components {
	.search-result mark {
		@apply bg-[#fdffa4] dark:text-background text-foreground rounded px-0.5 py-px;
	}
}