/**
 * Vercel-inspired MkDocs Material Theme Customization
 *
 * @format
 */
/* Import Inter font for better typography */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

/* Root variables for consistent theming - Default to light mode */
:root {
	/* Light Mode Color Variables */
	--color-primary: #2563eb;
	--color-primary-light: #3b82f6;
	--color-primary-dark: #1d4ed8;
	--color-accent: #2563eb;
	--color-text: #1f2937;
	--color-text-light: #6b7280;
	--color-bg: #ffffff;
	--color-bg-secondary: #f9fafb;
	--color-bg-tertiary: #f3f4f6;
	--color-border: #e5e7eb;
	--color-border-light: #d1d5db;
	--color-link: #2563eb;
	--color-link-hover: #1d4ed8;

	/* Typography Variables */
	--font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, sans-serif;
	--font-family-mono: "JetBrains Mono", "Fira Code", "Monaco", "Consolas",
		monospace;
	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-size-xs: 0.65rem;
	--font-size-sm: 0.75rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 1.75rem;
	--line-height-tight: 1.2;
	--line-height-snug: 1.3;
	--line-height-normal: 1.4;
	--line-height-relaxed: 1.5;
	--line-height-loose: 1.6;
	--letter-spacing-tight: -0.025em;
	--letter-spacing-wide: 0.05em;

	/* Spacing Variables */
	--spacing-xs: 0.125rem;
	--spacing-sm: 0.25rem;
	--spacing-md: 0.5rem;
	--spacing-lg: 0.75rem;
	--spacing-xl: 1rem;
	--spacing-2xl: 1.25rem;
	--spacing-3xl: 1.5rem;
	--spacing-4xl: 2rem;
	--spacing-5xl: 2.5rem;

	/* Border Radius Variables */
	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;

	/* Shadow Variables */
	--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
		0 2px 4px -1px rgba(0, 0, 0, 0.2);

	/* Layout Variables */
	--max-width-content: 80rem;
	--max-width-main: 1700px;

	/* MkDocs Material Theme Overrides */
	--md-primary-fg-color: var(--color-primary);
	--md-primary-fg-color--light: var(--color-primary-light);
	--md-primary-fg-color--dark: var(--color-primary-dark);
	--md-accent-fg-color: var(--color-accent);
	--md-default-fg-color: var(--color-text);
	--md-default-fg-color--light: var(--color-text-light);
	--md-default-bg-color: var(--color-bg);
	--md-typeset-color: var(--color-text);
	--md-typeset-a-color: var(--color-link);
	--md-footer-bg-color: var(--color-bg);
	--md-footer-bg-color--dark: var(--color-bg);
}

/* Light mode theme */
[data-md-color-scheme="default"] {
	/* Light mode colors */
	--color-primary: #2563eb;
	--color-primary-light: #3b82f6;
	--color-primary-dark: #1d4ed8;
	--color-accent: #2563eb;
	--color-text: #1f2937;
	--color-text-light: #6b7280;
	--color-bg: #ffffff;
	--color-bg-secondary: #f9fafb;
	--color-bg-tertiary: #f3f4f6;
	--color-border: #e5e7eb;
	--color-border-light: #d1d5db;
	--color-link: #2563eb;
	--color-link-hover: #1d4ed8;

	/* MkDocs Material theme overrides for light mode */
	--md-primary-fg-color: var(--color-primary);
	--md-primary-fg-color--light: var(--color-primary-light);
	--md-primary-fg-color--dark: var(--color-primary-dark);
	--md-default-fg-color: var(--color-text);
	--md-default-fg-color--light: var(--color-text-light);
	--md-default-bg-color: var(--color-bg);
	--md-typeset-color: var(--color-text);
	--md-typeset-a-color: var(--color-link);
	--md-footer-bg-color: var(--color-bg);
	--md-footer-bg-color--dark: var(--color-bg);
}

/* Dark mode theme */
[data-md-color-scheme="slate"] {
	/* Dark mode colors */
	--color-primary: #ffffff;
	--color-primary-light: #dddddd;
	--color-primary-dark: #eeeeee;
	--color-accent: #ffffff;
	--color-text: #eeeeee;
	--color-text-light: #a1a1aa;
	--color-bg: #000000;
	--color-bg-secondary: #1a1a1a;
	--color-bg-tertiary: #222222;
	--color-border: #333333;
	--color-border-light: #4a4a4a;
	--color-link: #ffffff;
	--color-link-hover: #dddddd;

	/* MkDocs Material theme overrides for dark mode */
	--md-primary-fg-color: var(--color-primary);
	--md-primary-fg-color--light: var(--color-primary-light);
	--md-primary-fg-color--dark: var(--color-primary-dark);
	--md-default-fg-color: var(--color-text);
	--md-default-fg-color--light: var(--color-text-light);
	--md-default-bg-color: var(--color-bg);
	--md-typeset-color: var(--color-text);
	--md-typeset-a-color: var(--color-link);
	--md-footer-bg-color: var(--color-bg);
	--md-footer-bg-color--dark: var(--color-bg);
}

/* Structural elements use theme colors */
.md-header,
.md-tabs,
.md-nav,
.md-sidebar,
.md-main {
	background-color: var(--color-bg);
}

/* Override any Material theme default colors */
.md-header[data-md-state="shadow"],
.md-header[data-md-state="hidden"] {
	background-color: var(--color-bg);
}

/* Search bar uses theme colors */
.md-search__input {
	background-color: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
	color: var(--color-text);
}

.md-search__input::placeholder {
	color: var(--color-text-light);
}

/* Footer uses theme colors */
.md-footer {
	background-color: var(--color-bg);
	border-top: 1px solid var(--color-border);
}

/* Typography improvements */
.md-typeset {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-loose);
	color: var(--md-typeset-color);
}

.md-typeset h1 {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	margin: var(--spacing-md) 0 var(--spacing-3xl) 0;
	color: var(--md-default-fg-color);
	letter-spacing: var(--letter-spacing-tight);
}

.md-typeset h2 {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-snug);
	margin: var(--spacing-5xl) 0 var(--spacing-xl) 0;
	color: var(--md-default-fg-color);
	letter-spacing: var(--letter-spacing-tight);
	border-bottom: 1px solid var(--color-bg-tertiary);
	padding-bottom: var(--spacing-md);
}

.md-typeset h3 {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-normal);
	margin: var(--spacing-4xl) 0 var(--spacing-lg) 0;
	color: var(--md-default-fg-color);
	letter-spacing: var(--letter-spacing-tight);
}

.md-typeset h4 {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-normal);
	margin: var(--spacing-3xl) 0 var(--spacing-md) 0;
	color: var(--md-default-fg-color);
}

.md-typeset h5 {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-normal);
	margin: var(--spacing-2xl) 0 var(--spacing-md) 0;
	color: var(--md-default-fg-color);
}

.md-typeset h6 {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-normal);
	margin: var(--spacing-xl) 0 var(--spacing-md) 0;
	color: var(--md-default-fg-color);
}

.filename {
	background-color: var(--color-bg) !important;
	padding: none !important;
}
/* Code blocks use theme colors */
.md-typeset code {
	font-family: var(--font-family-mono);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	background-color: var(--color-bg-secondary);
	color: var(--color-text);
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
}

/* Code blocks use theme colors */
.md-typeset pre {
	background-color: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: var(--spacing-3xl);
	margin: var(--spacing-3xl) 0;
	overflow-x: auto;
}

.md-typeset pre code {
	background: none;
	border: none;
	padding: 0;
	color: inherit;
	font-size: var(--font-size-xs);
	line-height: var(--line-height-loose);
}

/* Navigation improvements */
.md-nav__title {
	font-weight: var(--font-weight-semibold);
	color: var(--md-default-fg-color--light);
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
}

.md-nav__link {
	font-weight: var(--font-weight-normal);
	font-size: var(--font-size-xs);
	color: var(--md-default-fg-color--light);
	transition: color 0.2s ease;
	line-height: var(--line-height-relaxed);
}

.md-nav__link:hover {
	color: var(--md-primary-fg-color);
}

.md-nav__link--active {
	color: var(--md-primary-fg-color);
	font-weight: var(--font-weight-medium);
}

/* Top navigation tabs use theme colors */
.md-tabs {
	background-color: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

/* Header uses theme colors */
.md-header {
	background-color: var(--color-bg);
	color: var(--color-text);
}

/* Navigation uses theme colors */
.md-nav {
	background-color: var(--color-bg);
}

/* Add left border to main content area and grid for visual separation */
.md-content,
.md-main__inner {
	border-left: 1px solid var(--color-bg-tertiary) !important;
	box-sizing: border-box !important;
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Make documentation pages wider */
.md-main__inner {
	max-width: var(--max-width-main) !important;
	/* padding-left: 2rem !important;
	padding-right: 2rem !important; */
}

.md-content {
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Adjust grid layout for wider content */
.md-grid {
	max-width: var(--max-width-main) !important;
}

.md-sidebar,
.md-nav--primary,
.md-nav__inner,
.md-sidebar[data-md-component="navigation"] {
	border: none !important;
}

/* Remove any borders from the right sidebar */
.md-sidebar.md-sidebar--secondary {
	border: none !important;
}

/* Ensure left sidebar has proper border */
.md-nav--primary {
	border: none;
}

/* Override any Material theme colors */
.md-header[data-md-state="shadow"] {
	background-color: var(--color-bg);
}

/* Tab links use theme colors */
.md-tabs__link {
	color: var(--color-text);
	font-weight: var(--font-weight-medium);
	transition: color 0.2s ease;
}

.md-tabs__link:hover {
	color: var(--color-primary);
}

.md-tabs__link--active {
	color: var(--color-primary) !important;
	border-bottom: 2px solid var(--color-primary);
	font-weight: var(--font-weight-semibold);
}

/* Ensure active tab color works in both light and dark modes */
[data-md-color-scheme="default"] .md-tabs__link--active {
	color: var(--color-primary) !important;
}

[data-md-color-scheme="slate"] .md-tabs__link--active {
	color: var(--color-primary) !important;
}

/* Additional Material theme overrides for active tabs */
.md-tabs__item--active .md-tabs__link {
	color: var(--color-primary) !important;
}

[data-md-color-scheme="default"] .md-tabs__item--active .md-tabs__link {
	color: #2563eb !important;
}

[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link {
	color: #ffffff !important;
}

/* Force active tab styling with higher specificity */
.md-tabs .md-tabs__item--active .md-tabs__link {
	color: var(--color-primary) !important;
	font-weight: var(--font-weight-semibold) !important;
}

/* Light mode specific active tab */
[data-md-color-scheme="default"]
	.md-tabs
	.md-tabs__item--active
	.md-tabs__link {
	color: #2563eb !important;
}

/* Dark mode specific active tab */
[data-md-color-scheme="slate"] .md-tabs .md-tabs__item--active .md-tabs__link {
	color: #ffffff !important;
}

/* Sidebar improvements use theme colors */
.md-nav--primary .md-nav__title {
	background-color: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	padding: var(--spacing-xl) var(--spacing-3xl);
	margin: 0;
}

/* Content area improvements */
.md-content {
	padding: var(--spacing-4xl) 0;
}

.md-content__inner {
	margin: 0 auto;
	max-width: var(--max-width-content);
	padding: 0 var(--spacing-3xl);
}

/* Links */
.md-typeset a {
	color: var(--md-typeset-a-color);
	text-decoration: none;
	transition: color 0.2s ease;
}

.md-typeset a:hover {
	color: var(--color-link-hover);
	text-decoration: underline;
}

/* Lists */
.md-typeset ul,
.md-typeset ol {
	margin: var(--spacing-xl) 0;
	padding-left: var(--spacing-3xl);
}

.md-typeset li {
	margin: var(--spacing-md) 0;
	line-height: var(--line-height-loose);
}

/* Blockquotes use theme colors */
.md-typeset blockquote {
	border-left: 4px solid var(--md-primary-fg-color);
	background-color: var(--color-bg-secondary);
	padding: var(--spacing-xl) var(--spacing-3xl);
	margin: var(--spacing-3xl) 0;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Tables use theme colors */
.md-typeset table {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-md);
}

.md-typeset th {
	background-color: var(--color-bg-secondary);
	font-weight: var(--font-weight-semibold);
	color: var(--color-primary);
	padding: var(--spacing-xl);
	border-bottom: 1px solid var(--color-border);
}

.md-typeset td {
	padding: var(--spacing-xl);
	border-bottom: 1px solid var(--color-border);
}

/* Admonitions use theme colors */
.md-typeset .admonition {
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-md);
	margin: var(--spacing-3xl) 0;
}

.md-typeset .admonition-title {
	font-weight: var(--font-weight-semibold);
	padding: var(--spacing-xl) var(--spacing-3xl);
	border-bottom: 1px solid var(--color-border);
}

/* Responsive improvements */
@media (max-width: 76.1875em) {
	.md-nav--primary .md-nav__title {
		padding: var(--spacing-lg) var(--spacing-xl);
	}

	.md-content__inner {
		padding: 0 var(--spacing-xl);
	}

	.md-typeset h1 {
		font-size: var(--font-size-3xl);
	}

	.md-typeset h2 {
		font-size: var(--font-size-xl);
	}
}

/* Smooth transitions */
* {
	transition: color 0.2s ease, background-color 0.2s ease,
		border-color 0.2s ease;
}

/* Custom scrollbar uses theme colors */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--color-bg-secondary);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--color-border-light);
}