@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
	--bg: #0b0d12;
	--panel: rgba(255, 255, 255, 0.035);
	--panel-hover: rgba(255, 255, 255, 0.065);
	--panel-solid: #11141b;
	--text: #f4f6fb;
	--muted: #8c96a8;
	--line: rgba(255, 255, 255, 0.08);
	--accent: #6ee7b7;
	--accent-light: #a7f3d0;
	--accent-glow: rgba(110, 231, 183, 0.14);
	--accent-2: #93c5fd;
	--accent-2-glow: rgba(147, 197, 253, 0.12);
	--danger: #f43f5e;
	--font-display: "Inter", "Segoe UI", sans-serif;
	--font-body: "Inter", "Segoe UI", sans-serif;
	--radius: 12px;
	--radius-sm: 8px;
	--radius-lg: 18px;
	--easing: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
}

html {
	overflow-y: scroll;
}

.shell {
	--site-shell-inline-pad: 16px;
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--text);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 320px),
		var(--bg);
	background-attachment: fixed;
	overflow-x: hidden;
}

.bg-grid {
	position: fixed;
	inset: 0;
	background-image:
		linear-gradient(rgba(139, 92, 246, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(139, 92, 246, 0.04) 1px, transparent 1px);
	background-size: 40px 40px;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, black 20%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, black 20%, transparent 80%);
}

/* Dim bg-grid so particle canvas dominates */
.bg-grid { opacity: 0.16; }

/* ── Particle canvas background ─────────────────────────────── */

.bg-canvas {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.bg-canvas.ready { opacity: 0.18; }

::selection {
	background: rgba(110, 231, 183, 0.24);
	color: var(--text);
}

/* ── Legacy orbs (still in theme for any page that uses them) ── */

.bg-orb {
	position: fixed;
	width: 600px;
	height: 600px;
	border-radius: 52% 48% 44% 56% / 46% 54% 42% 58%;
	filter: blur(88px) saturate(1.2);
	opacity: 0;
	pointer-events: none;
	mix-blend-mode: screen;
	will-change: transform, opacity;
	transform-origin: center;
}

.orb-1 {
	top: -200px;
	left: -200px;
	background: radial-gradient(circle at 62% 30%, #a855f7 0%, #7c3aed 45%, #3b0764 80%, transparent 100%);
}

.orb-2 {
	right: -200px;
	top: -60px;
	background: radial-gradient(circle at 36% 34%, #818cf8 0%, #6366f1 42%, #1e1b4b 78%, transparent 100%);
}

.orb-3 {
	width: 500px;
	height: 500px;
	left: 30%;
	top: -200px;
	background: radial-gradient(circle at 45% 38%, #38bdf8 0%, #0ea5e9 44%, #0c4a6e 82%, transparent 100%);
}

.orb-4 {
	width: 440px;
	height: 440px;
	right: 10%;
	bottom: -200px;
	background: radial-gradient(circle at 52% 42%, #c084fc 0%, #a855f7 48%, #4a1d96 84%, transparent 100%);
}

.orb-5 {
	width: 380px;
	height: 380px;
	left: -120px;
	bottom: 10%;
	background: radial-gradient(circle at 38% 46%, #67e8f9 0%, #06b6d4 46%, #0e4f6e 84%, transparent 100%);
}