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);
}

/* ═══════════════════════════════════════════
   OKLCH / DISPLAY-P3 ACCENT PALETTE (PROGRESSIVE ENHANCEMENT)
   ═══════════════════════════════════════════
   The @theme block above keeps the original sRGB hex values, which
   Tailwind reads at build time and which serve as the fallback for
   sRGB monitors and browsers without OKLCH support.

   When the browser understands oklch(), we redefine the SAME vivid
   accents + node-type colors using their OKLCH equivalents. These are
   faithful conversions of the hex values (same hue/chroma identity);
   on a wide-gamut display-p3 monitor they render more saturated while
   reading as the same color. The void/abyss/surface neutrals are left
   untouched — only the vivid accents benefit from the wider gamut. */
@supports (color: oklch(0 0 0)) {
	:root {
		/* Accent colors */
		--color-synapse: oklch(0.585 0.222 277);
		--color-synapse-glow: oklch(0.685 0.169 277);
		--color-dream: oklch(0.627 0.265 304);
		--color-dream-glow: oklch(0.714 0.203 305);
		--color-memory: oklch(0.623 0.214 259);
		--color-recall: oklch(0.696 0.17 162);
		--color-decay: oklch(0.637 0.237 25);
		--color-warning: oklch(0.769 0.188 70);

		/* Node type colors */
		--color-node-fact: oklch(0.623 0.214 259);
		--color-node-concept: oklch(0.606 0.25 292);
		--color-node-event: oklch(0.769 0.188 70);
		--color-node-person: oklch(0.696 0.17 162);
		--color-node-place: oklch(0.715 0.143 215);
		--color-node-note: oklch(0.551 0.027 264);
		--color-node-pattern: oklch(0.656 0.241 354);
		--color-node-decision: oklch(0.637 0.237 25);
	}
}

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); }

/* ═══════════════════════════════════════════
   VIEW TRANSITIONS (CROSSFADE)
   ═══════════════════════════════════════════
   Native View Transitions API crossfade between routes. Pairs with the
   onNavigate hook in +layout.svelte that calls document.startViewTransition.
   Reduced-motion users get an instant cut (the @media guard disables the
   animation entirely, so the default browser cross-fade does not run). */
@media not (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 180ms;
		animation-timing-function: ease;
	}
	::view-transition-old(root) {
		animation-name: vt-fade-out;
	}
	::view-transition-new(root) {
		animation-name: vt-fade-in;
	}

	@keyframes vt-fade-out {
		from { opacity: 1; }
		to { opacity: 0; }
	}
	@keyframes vt-fade-in {
		from { opacity: 0; }
		to { opacity: 1; }
	}
}