vestige/apps/dashboard/src/app.css

@import 'tailwindcss';

@theme {
	/* Vestige cosmic dark palette */
	--color-void: #050510;
	--color-abyss: #0a0a1a;
	--color-deep: #10102a;
	--color-surface: #161638;
	--color-elevated: #1e1e4a;
	--color-subtle: #2a2a5e;
	--color-muted: #4a4a7a;
	--color-dim: #7a7aaa;
	--color-text: #e0e0ff;
	--color-bright: #ffffff;

	/* Accent colors */
	--color-synapse: #6366f1;
	--color-synapse-glow: #818cf8;
	--color-dream: #a855f7;
	--color-dream-glow: #c084fc;
	--color-memory: #3b82f6;
	--color-recall: #10b981;
	--color-decay: #ef4444;
	--color-warning: #f59e0b;

	/* Node type colors */
	--color-node-fact: #3b82f6;
	--color-node-concept: #8b5cf6;
	--color-node-event: #f59e0b;
	--color-node-person: #10b981;
	--color-node-place: #06b6d4;
	--color-node-note: #6b7280;
	--color-node-pattern: #ec4899;
	--color-node-decision: #ef4444;

	--font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
}

/* Base styles */
html {
	background: var(--color-void);
	color: var(--color-text);
	font-family: var(--font-mono);
}

body {
	margin: 0;
	min-height: 100vh;
	overflow: hidden;
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: var(--color-subtle);
	border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--color-muted);
}

/* ═══════════════════════════════════════════
   GLASSMORPHISM SYSTEM
   ═══════════════════════════════════════════ */

.glass {
	background: rgba(22, 22, 56, 0.45);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(99, 102, 241, 0.08);
	box-shadow:
		inset 0 1px 0 0 rgba(255, 255, 255, 0.03),
		0 4px 24px rgba(0, 0, 0, 0.3);
}

.glass-subtle {
	background: rgba(16, 16, 42, 0.4);
	backdrop-filter: blur(12px) saturate(150%);
	-webkit-backdrop-filter: blur(12px) saturate(150%);
	border: 1px solid rgba(99, 102, 241, 0.06);
	box-shadow:
		inset 0 1px 0 0 rgba(255, 255, 255, 0.02),
		0 2px 12px rgba(0, 0, 0, 0.2);
}

.glass-sidebar {
	background: rgba(10, 10, 26, 0.6);
	backdrop-filter: blur(24px) saturate(180%);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	border-right: 1px solid rgba(99, 102, 241, 0.1);
	box-shadow:
		inset -1px 0 0 0 rgba(255, 255, 255, 0.02),
		4px 0 24px rgba(0, 0, 0, 0.3);
}

.glass-panel {
	background: rgba(10, 10, 26, 0.8);
	backdrop-filter: blur(24px) saturate(180%);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	border: 1px solid rgba(99, 102, 241, 0.1);
	box-shadow:
		inset 0 1px 0 0 rgba(255, 255, 255, 0.03),
		0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════
   GLOW EFFECTS
   ═══════════════════════════════════════════ */

.glow-synapse {
	box-shadow: 0 0 20px rgba(99, 102, 241, 0.3), 0 0 60px rgba(99, 102, 241, 0.1);
}
.glow-dream {
	box-shadow: 0 0 20px rgba(168, 85, 247, 0.3), 0 0 60px rgba(168, 85, 247, 0.1);
}
.glow-memory {
	box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), 0 0 60px rgba(59, 130, 246, 0.1);
}

/* ═══════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════ */

/* Pulse animation for live indicators */
@keyframes pulse-glow {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}
.animate-pulse-glow {
	animation: pulse-glow 2s ease-in-out infinite;
}

/* Ambient background orbs */
@keyframes orb-float-1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	25% { transform: translate(60px, -40px) scale(1.1); }
	50% { transform: translate(-30px, -80px) scale(0.95); }
	75% { transform: translate(-60px, -20px) scale(1.05); }
}

@keyframes orb-float-2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	25% { transform: translate(-50px, 30px) scale(1.08); }
	50% { transform: translate(40px, 60px) scale(0.92); }
	75% { transform: translate(20px, -40px) scale(1.03); }
}

@keyframes orb-float-3 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	25% { transform: translate(30px, 50px) scale(1.05); }
	50% { transform: translate(-60px, 20px) scale(0.98); }
	75% { transform: translate(40px, -30px) scale(1.1); }
}

.ambient-orb {
	position: fixed;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
	z-index: 0;
	opacity: 0.35;
}

.ambient-orb-1 {
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(168, 85, 247, 0.4), transparent 70%);
	top: -10%;
	right: -5%;
	animation: orb-float-1 20s ease-in-out infinite;
}

.ambient-orb-2 {
	width: 350px;
	height: 350px;
	background: radial-gradient(circle, rgba(99, 102, 241, 0.35), transparent 70%);
	bottom: -15%;
	left: -5%;
	animation: orb-float-2 25s ease-in-out infinite;
}

.ambient-orb-3 {
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(245, 158, 11, 0.2), transparent 70%);
	top: 40%;
	left: 40%;
	animation: orb-float-3 22s ease-in-out infinite;
}

/* Active nav indicator with animated gradient border */
.nav-active-border {
	position: relative;
}
.nav-active-border::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 2px;
	border-radius: 1px;
	background: linear-gradient(
		180deg,
		var(--color-synapse),
		var(--color-dream),
		var(--color-synapse)
	);
	background-size: 100% 200%;
	animation: gradient-shift 3s ease-in-out infinite;
}

@keyframes gradient-shift {
	0%, 100% { background-position: 0% 0%; }
	50% { background-position: 0% 100%; }
}

/* Neural particle animation */
@keyframes float {
	0%, 100% { transform: translateY(0) translateX(0); }
	25% { transform: translateY(-10px) translateX(5px); }
	50% { transform: translateY(-5px) translateX(-5px); }
	75% { transform: translateY(-15px) translateX(3px); }
}

/* Retention bar colors */
.retention-critical { color: var(--color-decay); }
.retention-low { color: var(--color-warning); }
.retention-good { color: var(--color-recall); }
.retention-strong { color: var(--color-synapse); }