/* Fonts — privacy-friendly CDN */
@import url("https://fonts.bunny.net/css?family=inter:400,500,600,700|jetbrains-mono:400,500");

/* ─── Brand Colors ─── */

:root {
	--brand-primary: #06b6d4;
	--brand-secondary: #14b8a6;
	--brand-soft: rgba(6, 182, 212, 0.14);

	/* VitePress brand overrides */
	--vp-c-brand-1: #06b6d4;
	--vp-c-brand-2: #0891b2;
	--vp-c-brand-3: #0e7490;
	--vp-c-brand-soft: rgba(6, 182, 212, 0.14);

	/* Typography */
	--vp-font-family-base: "Inter", ui-sans-serif, system-ui, sans-serif;
	--vp-font-family-mono: "JetBrains Mono", ui-monospace, "Cascadia Code",
		monospace;
}

/* ─── Dark Mode ─── */

.dark {
	--vp-c-bg: #0f172a;
	--vp-c-bg-soft: #1e293b;
	--vp-c-bg-mute: #334155;
	--vp-c-bg-alt: #1e293b;

	--vp-c-text-1: #e2e8f0;
	--vp-c-text-2: #94a3b8;
	--vp-c-text-3: #64748b;

	--vp-c-divider: rgba(148, 163, 184, 0.12);

	--vp-code-block-bg: #1e293b;
}

/* ─── Code Blocks ─── */

.dark .vp-code-group .tabs label {
	color: #94a3b8;
}

.dark .vp-code-group .tabs label.active {
	color: var(--brand-primary);
}

/* ─── Utilities ─── */

.gradient-text {
	background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ─── Feature Cards (glassmorphism) ─── */

.feature-card {
	background: rgba(30, 41, 59, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 1.5rem;
	backdrop-filter: blur(12px);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
	border-color: rgba(6, 182, 212, 0.4);
	box-shadow: 0 0 20px rgba(6, 182, 212, 0.1);
}

:root .feature-card {
	background: rgba(248, 250, 252, 0.8);
	border-color: rgba(0, 0, 0, 0.08);
}

:root .feature-card:hover {
	border-color: rgba(6, 182, 212, 0.3);
	box-shadow: 0 0 20px rgba(6, 182, 212, 0.08);
}

/* ─── Hero ─── */

.hero-gradient {
	background:
		radial-gradient(ellipse at 20% 50%, rgba(6, 182, 212, 0.15) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 20%, rgba(20, 184, 166, 0.1) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 80%, rgba(6, 182, 212, 0.08) 0%, transparent 50%);
}

/* ─── VitePress Home Override ─── */

.VPHero .name .clip {
	background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
