@import 'tailwindcss';
@import 'tw-animate-css';
/* @import '@fontsource-variable/public-sans';
@import '@fontsource-variable/outfit'; */
@import '@fontsource-variable/rubik';
@import '@fontsource-variable/merriweather';

@custom-variant dark (&:is(.dark *));

:root {
	/* --font-outfit: 'Outfit Variable', sans-serif;
	--font-public-sans: 'Public Sans Variable', sans-serif; */
	--font-rubik: 'Rubik Variable', sans-serif;
	--font-merriweather: 'Merriweather Variable', serif;
	--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.852 0.199 91.936);
	--primary-foreground: oklch(0.421 0.095 57.708);
	--secondary: oklch(0.967 0.001 286.375);
	--secondary-foreground: oklch(0.21 0.006 285.885);
	--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.905 0.182 98.111);
	--chart-2: oklch(0.795 0.184 86.047);
	--chart-3: oklch(0.681 0.162 75.834);
	--chart-4: oklch(0.554 0.135 66.442);
	--chart-5: oklch(0.476 0.114 61.907);
	--radius: 0.625rem;
	--sidebar: oklch(0.985 0 0);
	--sidebar-foreground: oklch(0.145 0 0);
	--sidebar-primary: oklch(0.681 0.162 75.834);
	--sidebar-primary-foreground: oklch(0.987 0.026 102.212);
	--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-size: 16px;
}

.dark {
	--bg-color: oklch(14.479% 0.00002 271.152);
	--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.795 0.184 86.047);
	--primary-foreground: oklch(0.421 0.095 57.708);
	--secondary: oklch(0.274 0.006 286.033);
	--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.905 0.182 98.111);
	--chart-2: oklch(0.795 0.184 86.047);
	--chart-3: oklch(0.681 0.162 75.834);
	--chart-4: oklch(0.554 0.135 66.442);
	--chart-5: oklch(0.476 0.114 61.907);
	--sidebar: oklch(0.205 0 0);
	--sidebar-foreground: oklch(0.985 0 0);
	--sidebar-primary: oklch(0.795 0.184 86.047);
	--sidebar-primary-foreground: oklch(0.987 0.026 102.212);
	--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);
}

@theme inline {
	--font-sans: var(--font-rubik);
	--font-serif: var(--font-merriweather);
	--color-sidebar-ring: var(--sidebar-ring);
	--color-sidebar-border: var(--sidebar-border);
	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
	--color-sidebar-accent: var(--sidebar-accent);
	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
	--color-sidebar-primary: var(--sidebar-primary);
	--color-sidebar-foreground: var(--sidebar-foreground);
	--color-sidebar: var(--sidebar);
	--color-chart-5: var(--chart-5);
	--color-chart-4: var(--chart-4);
	--color-chart-3: var(--chart-3);
	--color-chart-2: var(--chart-2);
	--color-chart-1: var(--chart-1);
	--color-ring: var(--ring);
	--color-input: var(--input);
	--color-border: var(--border);
	--color-destructive: var(--destructive);
	--color-accent-foreground: var(--accent-foreground);
	--color-accent: var(--accent);
	--color-muted-foreground: var(--muted-foreground);
	--color-muted: var(--muted);
	--color-secondary-foreground: var(--secondary-foreground);
	--color-secondary: var(--secondary);
	--color-primary-foreground: var(--primary-foreground);
	--color-primary: var(--primary);
	--color-popover-foreground: var(--popover-foreground);
	--color-popover: var(--popover);
	--color-card-foreground: var(--card-foreground);
	--color-card: var(--card);
	--color-foreground: var(--foreground);
	--color-background: var(--background);
	--radius-sm: calc(var(--radius) * 0.6);
	--radius-md: calc(var(--radius) * 0.8);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) * 1.4);
	--radius-2xl: calc(var(--radius) * 1.8);
	--radius-3xl: calc(var(--radius) * 2.2);
	--radius-4xl: calc(var(--radius) * 2.6);
}

@layer base {
	* {
		@apply border-border outline-ring/50;
	}
	body {
		@apply bg-background text-foreground font-sans antialiased;
	}
	html {
		@apply font-serif;
	}
}

@custom-variant data-open {
	&:where([data-state='open']),
	&:where([data-open]:not([data-open='false'])) {
		@slot;
	}
	&:where([data-state='open']),
	&:where([data-open]:not([data-open='false'])) {
		@slot;
	}
	&:where([data-state='open']),
	&:where([data-open]:not([data-open='false'])) {
		@slot;
	}
	&:where([data-state='open']),
	&:where([data-open]:not([data-open='false'])) {
		@slot;
	}
	&:where([data-state="open"]), &:where([data-open]:not([data-open="false"])) {
		@slot;
	}
}

@custom-variant data-closed {
	&:where([data-state='closed']),
	&:where([data-closed]:not([data-closed='false'])) {
		@slot;
	}
	&:where([data-state='closed']),
	&:where([data-closed]:not([data-closed='false'])) {
		@slot;
	}
	&:where([data-state='closed']),
	&:where([data-closed]:not([data-closed='false'])) {
		@slot;
	}
	&:where([data-state='closed']),
	&:where([data-closed]:not([data-closed='false'])) {
		@slot;
	}
	&:where([data-state="closed"]), &:where([data-closed]:not([data-closed="false"])) {
		@slot;
	}
}

@custom-variant data-checked {
	&:where([data-state='checked']),
	&:where([data-checked]:not([data-checked='false'])) {
		@slot;
	}
	&:where([data-state='checked']),
	&:where([data-checked]:not([data-checked='false'])) {
		@slot;
	}
	&:where([data-state='checked']),
	&:where([data-checked]:not([data-checked='false'])) {
		@slot;
	}
	&:where([data-state='checked']),
	&:where([data-checked]:not([data-checked='false'])) {
		@slot;
	}
	&:where([data-state="checked"]), &:where([data-checked]:not([data-checked="false"])) {
		@slot;
	}
}

@custom-variant data-unchecked {
	&:where([data-state='unchecked']),
	&:where([data-unchecked]:not([data-unchecked='false'])) {
		@slot;
	}
	&:where([data-state='unchecked']),
	&:where([data-unchecked]:not([data-unchecked='false'])) {
		@slot;
	}
	&:where([data-state='unchecked']),
	&:where([data-unchecked]:not([data-unchecked='false'])) {
		@slot;
	}
	&:where([data-state='unchecked']),
	&:where([data-unchecked]:not([data-unchecked='false'])) {
		@slot;
	}
	&:where([data-state="unchecked"]), &:where([data-unchecked]:not([data-unchecked="false"])) {
		@slot;
	}
}

@custom-variant data-selected {
	&:where([data-selected]) {
		@slot;
	}
}

@custom-variant data-disabled {
	&:where([data-disabled='true']),
	&:where([data-disabled]:not([data-disabled='false'])) {
		@slot;
	}
	&:where([data-disabled='true']),
	&:where([data-disabled]:not([data-disabled='false'])) {
		@slot;
	}
	&:where([data-disabled='true']),
	&:where([data-disabled]:not([data-disabled='false'])) {
		@slot;
	}
	&:where([data-disabled='true']),
	&:where([data-disabled]:not([data-disabled='false'])) {
		@slot;
	}
	&:where([data-disabled="true"]), &:where([data-disabled]:not([data-disabled="false"])) {
		@slot;
	}
}

@custom-variant data-active {
	&:where([data-state='active']),
	&:where([data-active]:not([data-active='false'])) {
		@slot;
	}
	&:where([data-state='active']),
	&:where([data-active]:not([data-active='false'])) {
		@slot;
	}
	&:where([data-state='active']),
	&:where([data-active]:not([data-active='false'])) {
		@slot;
	}
	&:where([data-state='active']),
	&:where([data-active]:not([data-active='false'])) {
		@slot;
	}
	&:where([data-state="active"]), &:where([data-active]:not([data-active="false"])) {
		@slot;
	}
}

@custom-variant data-horizontal {
	&:where([data-orientation='horizontal']) {
		@slot;
	}
	&:where([data-orientation='horizontal']) {
		@slot;
	}
	&:where([data-orientation='horizontal']) {
		@slot;
	}
	&:where([data-orientation="horizontal"]) {
		@slot;
	}
}

@custom-variant data-vertical {
	&:where([data-orientation='vertical']) {
		@slot;
	}
	&:where([data-orientation='vertical']) {
		@slot;
	}
	&:where([data-orientation='vertical']) {
		@slot;
	}
	&:where([data-orientation="vertical"]) {
		@slot;
	}
}

@utility no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
	&::-webkit-scrollbar {
		display: none;
	}
}

/* 
  Scrollbar styling for the entire app - can be overridden by more specific styles (e.g. code blocks, tables)
*/
::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}
::-webkit-scrollbar-track {
	background: color-mix(in srgb, var(--background) 80%, transparent);
	border-radius: 6px;
}
::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--foreground) 20%, transparent);
	border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--foreground) 30%, transparent);
}

/* 
  TODO: convert all this to use tailwind utilities
  Shared prose styling for markdown content
 */
.prose {
	font-size: 1.063rem;
	line-height: 1.8;
	color: var(--foreground);

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

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		scroll-margin-top: calc(100px + 1.5rem);
	}
}

.prose h2 {
	@apply mt-6 mb-4 font-serif text-3xl font-bold text-foreground;
	line-height: 3rem;
}

.prose h3 {
	font-size: 1.5rem;
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}

.prose h4 {
	font-size: 1.25rem;
	margin-top: 2rem;
	margin-bottom: 0.875rem;
}

.prose p {
	@apply mb-5 text-foreground/75;
}

.prose a {
	color: var(--primary);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
	transition: all 0.2s ease-in-out;
}

.prose a:hover {
	color: var(--chart-2);
	border-bottom-color: var(--chart-2);
}

/* External links - distinct styling with icon */
.prose a.external-link {
	color: var(--primary);
	position: relative;
}

.prose a.external-link::after {
	content: '';
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	margin-left: 0.25em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: baseline;
	opacity: 0.6;
	transition: opacity 0.2s ease-in-out;
}

.prose a.external-link:hover::after {
	opacity: 1;
}

.prose strong {
	font-weight: 600;
	color: var(--foreground);
}

.prose ul,
.prose ol {
	margin-bottom: 1.5rem;
	padding-left: 1.5rem;
}

.prose ul {
	list-style-type: disc;
}

.prose ol {
	list-style-type: decimal;
}

.prose li {
	margin-bottom: 0.5rem;
}

.prose li::marker {
	color: color-mix(in oklab, var(--primary) 60%, transparent);
}

.prose blockquote {
	margin: 2.5rem 0;
	padding: 0 0 0 1.75rem;
	border-left: 2px solid var(--border);
	background: transparent;
	border-radius: 0;
	font-style: italic;
	font-size: 1.125rem;
	line-height: 1.75;
	color: color-mix(in srgb, var(--foreground) 75%, transparent);
	position: relative;
}

.prose blockquote::before {
	content: '\201C';
	position: absolute;
	left: 0.5rem;
	top: -0.25rem;
	font-size: 2.5rem;
	font-weight: 700;
	color: color-mix(in srgb, var(--foreground) 15%, transparent);
	line-height: 1;
	font-style: normal;
}

.prose blockquote p {
	margin-left: 2rem;
	margin-bottom: 0.75rem;
	color: color-mix(in srgb, var(--foreground) 75%, transparent);
}

.prose blockquote p:last-child {
	margin-bottom: 0;
}

/* Enhanced code block styling */
.prose .code-block {
	position: relative;
	margin: 2rem 0;
	border-radius: 0.5rem;
	overflow: hidden;
	background: var(--card);
	border: 1px solid var(--border);
}

.prose .code-block-tabs .code-block {
	border-top: none;
}

.prose .code-block-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 0.5rem 0.5rem 0 0;
	padding: 0.625rem 1.25rem;
	background-color: var(--card);
	border-bottom: 1px solid var(--border);
}

.prose .code-block-title {
	font-family: var(--font-sans);
	font-size: 0.813rem;
	color: var(--foreground);
	font-weight: 500;
}

.prose .code-block-lang {
	font-size: 0.688rem;
	color: var(--muted-foreground);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
}

.prose .code-block-lang-icon {
	width: 1rem;
	height: 1rem;
	margin: 0;
	margin-right: 0.5rem;
	display: inline-block;
	border-radius: 0.125rem;
}

.prose .copy-button {
	position: absolute;
	bottom: 1rem;
	right: 0.75rem;
	padding: 0.375rem;
	background: color-mix(in srgb, var(--foreground) 8%, transparent);
	border-radius: 0.25rem;
	color: var(--muted-foreground);
	font-size: 0.5rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	pointer-events: none;
	z-index: 10;
	border: 1px solid var(--border);

	svg {
		display: block;
		width: 1rem;
		height: 1rem;
	}
}

.prose .code-block:hover .copy-button {
	opacity: 1;
	pointer-events: auto;
}

.prose .copy-button:hover {
	background: color-mix(in srgb, var(--foreground) 15%, transparent);
	color: var(--foreground);
	border-color: color-mix(in srgb, var(--foreground) 20%, transparent);
}

.prose .copy-button.copied {
	background: color-mix(in srgb, var(--chart-1) 15%, transparent);
	color: var(--chart-1);
	border-color: color-mix(in srgb, var(--chart-1) 30%, transparent);
	opacity: 1;
}

.prose .code-block pre {
	margin: 0;
	padding: 1rem 1rem;
	border-radius: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	overflow-x: auto;
	max-height: 600px;
}

/* Custom scrollbar for code blocks */
.prose .code-block pre::-webkit-scrollbar {
	height: 8px;
	width: 8px;
}

.prose .code-block pre::-webkit-scrollbar-track {
	background: color-mix(in srgb, var(--background) 70%, transparent);
	border-radius: 4px;
}

.prose .code-block pre::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--foreground) 20%, transparent);
	border-radius: 4px;
}

.prose .code-block pre::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--foreground) 30%, transparent);
}

/* Fallback for plain pre tags (without wrapper) */
.prose pre:not(.code-block pre) {
	margin: 2rem 0;
	padding: 1.5rem;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	overflow-x: auto;
	line-height: 1.6;
	white-space: pre;
}

.prose pre code {
	background: none;
	padding: 0;
	border-radius: 0;
	font-size: 0.875rem;
	line-height: unset;
	color: inherit;
}

/* Line numbers */
.prose .code-block.show-line-numbers pre code {
	counter-reset: line;
}

.prose .code-block.show-line-numbers pre code .line::before {
	counter-increment: line;
	content: counter(line);
	display: inline-block;
	width: 3ch;
	margin-right: 1.5rem;
	text-align: right;
	color: var(--muted-foreground);
	user-select: none;
}

[data-show-line-numbers='false'] pre code .line::before {
	display: none;
}

/* Tabbed code blocks */
.prose .code-block-tabs {
	margin: 2rem 0;
	border-radius: 0.5rem;
	overflow: hidden;
	background: var(--card);
}

.prose .tabs-header {
	display: flex;
	gap: 0;
	padding: 0 0.75rem;
	background-color: var(--card);
	overflow-x: auto;
	min-height: fit-content;
	border: 1px solid var(--border);
	border-radius: 0.5rem 0.5rem 0 0;
}

/* Custom scrollbar for tabs header */
.prose .tabs-header::-webkit-scrollbar {
	height: 6px;
}

.prose .tabs-header::-webkit-scrollbar-track {
	background: color-mix(in srgb, var(--background) 70%, transparent);
}

.prose .tabs-header::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--foreground) 20%, transparent);
	border-radius: 3px;
}

.prose .tabs-header::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--foreground) 30%, transparent);
}

.prose .tab {
	padding: 0.75rem 1.25rem;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	color: var(--muted-foreground);
	font-size: 0.813rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	position: relative;
	flex-shrink: 0;
}

.prose .tab:hover {
	color: var(--foreground);
	background: color-mix(in srgb, var(--foreground) 3%, transparent);
}

.prose .tab.active {
	color: var(--foreground);
	background: color-mix(in srgb, var(--foreground) 5%, transparent);
	border-bottom-color: var(--primary);
}

/* Remove code-block container styling when inside tabs */
.prose .code-block-tabs .code-block {
	margin: 0;
	border-radius: 0 0 0.5rem 0.5rem;
	background: transparent;
}

.prose .tab-content pre {
	margin: 0;
	border-radius: 0;
}

/* Inline code */
.prose :not(pre) > code {
	background: color-mix(in oklab, var(--primary) 10%, transparent);
	color: var(--primary);
	padding: 0.125rem 0.375rem;
	border-radius: 0.25rem;
	font-size: 0.875em;
	font-weight: 500;
	border: 1px solid color-mix(in oklab, var(--primary) 20%, transparent);
}

.prose img {
	max-width: 100%;
	height: auto;
	border-radius: 0.25rem;
	margin-inline: auto;
}

.prose img.enhanced-images {
	object-fit: contain;
	max-width: 100%;
	height: auto;
	margin: 2rem auto;
	border-radius: 0.5rem;
	padding: 0.25rem;
	border: 2px solid color-mix(in oklab, var(--primary) 10%, transparent);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--background) 80%, transparent);
}

.prose hr {
	margin: 3rem 0;
	border: none;
	border-top: 1px solid var(--border);
}

.prose table {
	width: 100%;
	margin: 2rem 0;
	border-collapse: collapse;
	font-size: 0.938rem;
	display: block;
	overflow-x: auto;
}

/* Custom scrollbar for tables */
.prose table::-webkit-scrollbar {
	height: 8px;
}

.prose table::-webkit-scrollbar-track {
	background: color-mix(in srgb, var(--background) 80%, transparent);
	border-radius: 4px;
}

.prose table::-webkit-scrollbar-thumb {
	background: color-mix(in oklab, var(--primary) 30%, transparent);
	border-radius: 4px;
}

.prose table::-webkit-scrollbar-thumb:hover {
	background: color-mix(in oklab, var(--primary) 50%, transparent);
}

.prose th {
	background: color-mix(in oklab, var(--primary) 10%, transparent);
	padding: 0.75rem 1rem;
	text-align: left;
	font-weight: 600;
	border: 1px solid var(--border);
	white-space: nowrap;
}

.prose td {
	padding: 0.75rem 1rem;
	border: 1px solid var(--border);
}

.prose tr:hover {
	background: color-mix(in oklab, var(--primary) 5%, transparent);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
	.prose {
		font-size: 1rem;
		padding-inline: 1rem;
	}

	.prose h3 {
		font-size: 1.25rem;
		margin-top: 1.75rem;
	}

	.prose .code-block pre {
		padding: 1rem;
	}

	.prose pre {
		padding: 1rem;
		margin: 1.5rem -0.5rem;
		border-radius: 0.375rem;
	}
}