/* Trilogy Theme System - Shared CSS Variables and Utilities */

/*
 * THEME SYSTEM GUIDE
 * ==================
 * 
 * This file is the SINGLE SOURCE OF TRUTH for all theme colors.
 * To change colors across the entire site, update the CSS variables below.
 * 
 * USAGE:
 * 
 * 1. USE UTILITY CLASSES (Preferred):
 *    <div class="bg-surface text-primary border-primary">
 *    These classes automatically adapt to light/dark mode!
 * 
 * 2. USE CSS VARIABLES in Custom Styles:
 *    .my-custom-element {
 *      background-color: rgb(var(--color-surface-primary));
 *      color: rgb(var(--color-text-primary));
 *    }
 * 
 * 3. AVOID HARDCODED COLORS:
 *    ❌ <div class="bg-gray-900 dark:bg-slate-950">  (scattered, hard to maintain)
 *    ✅ <div class="bg-surface">                      (uses theme variables)
 * 
 * TO CHANGE THE ENTIRE THEME:
 * Just update the CSS variables in :root (light) and .dark (dark) sections below!
 */

/* CSS Custom Properties for Theme Colors */
:root {
	/* Light mode colors */
	--color-bg-primary: 255 255 255; /* white */
	--color-bg-secondary: 249 250 251; /* gray-50 */
	--color-bg-tertiary: 243 244 246; /* gray-100 */
	--color-bg-hover: 249 250 251; /* gray-50 */

	--color-surface-primary: 255 255 255; /* white */
	--color-surface-secondary: 249 250 251; /* gray-50 */
	--color-surface-hover: 243 244 246; /* gray-100 */

	--color-border-primary: 229 231 235; /* gray-200 */
	--color-border-secondary: 209 213 219; /* gray-300 */

	--color-text-primary: 17 24 39; /* gray-900 */
	--color-text-secondary: 75 85 99; /* gray-600 */
	--color-text-muted: 107 114 128; /* gray-500 */
	--color-text-inverse: 255 255 255; /* white */

	--color-accent-primary: 132 204 22; /* lime-500 */
	--color-accent-hover: 163 230 53; /* lime-400 */
	--color-accent-muted: 132 204 22 / 0.1; /* lime-500 with opacity */
}

.dark {
	/* Dark mode colors - modern slate/indigo theme */
	--color-bg-primary: 2 6 23; /* slate-950 #020617 */
	--color-bg-secondary: 15 23 42; /* slate-900 #0f172a */
	--color-bg-tertiary: 30 41 59; /* slate-800 #1e293b */
	--color-bg-hover: 30 41 59; /* slate-800 #1e293b */

	--color-surface-primary: 15 23 42; /* slate-900 #0f172a */
	--color-surface-secondary: 30 41 59; /* slate-800 #1e293b */
	--color-surface-hover: 51 65 85; /* slate-700 #334155 */
	--color-surface-input: 30 41 59; /* slate-800 #1e293b */
	--color-surface-input-focus: 51 65 85; /* slate-700 #334155 */

	--color-border-primary: 51 65 85 / 0.5; /* slate-700 with opacity */
	--color-border-secondary: 71 85 105 / 0.3; /* slate-600 with opacity */

	--color-text-primary: 226 232 240; /* slate-200 #e2e8f0 */
	--color-text-secondary: 148 163 184; /* slate-400 #94a3b8 */
	--color-text-muted: 100 116 139; /* slate-500 #64748b */
	--color-text-inverse: 255 255 255; /* white */

	--color-accent-primary: 163 230 53; /* lime-400 #a3e635 */
	--color-accent-hover: 190 242 100; /* lime-300 #bef264 */
	--color-accent-muted: 163 230 53 / 0.2; /* lime-400 with opacity */
}

/* ========================================
   UTILITY CLASSES (Theme-Aware)
   ========================================
   
   Use these classes in your HTML instead of hardcoded colors.
   They automatically adapt to light/dark mode!
   
   BACKGROUNDS:
   - .bg-surface           Main surfaces (cards, panels)
   - .bg-surface-secondary Subtle backgrounds
   - .bg-surface-hover     Hover states
   
   TEXT:
   - .text-primary         Main text
   - .text-secondary       Secondary text
   - .text-muted           De-emphasized text
   
   BORDERS:
   - .border-primary       Main borders
   - .border-secondary     Subtle borders
   
   ======================================== */

.bg-surface { background-color: rgb(var(--color-surface-primary)); }
.bg-surface-secondary { background-color: rgb(var(--color-surface-secondary)); }
.bg-surface-hover { background-color: rgb(var(--color-surface-hover)); }

.border-primary { border-color: rgb(var(--color-border-primary)); }
.border-secondary { border-color: rgb(var(--color-border-secondary)); }

.text-primary { color: rgb(var(--color-text-primary)); }
.text-secondary { color: rgb(var(--color-text-secondary)); }
.text-muted { color: rgb(var(--color-text-muted)); }

/* Ring (outline) colors */
.ring-primary { --tw-ring-color: rgb(var(--color-border-primary)); }
.ring-secondary { --tw-ring-color: rgb(var(--color-border-secondary)); }

/* ========================================
   COMMON COMPONENT CLASSES
   ========================================
   
   Pre-built component classes that handle
   both light and dark modes automatically.
   
   ======================================== */

/* Cards and Containers */
.theme-card {
	border-radius: 0.5rem;
	padding: 1.5rem;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	background-color: white;
	border: 1px solid rgb(229 231 235);
}

.dark .theme-card {
	background-color: rgb(var(--color-surface-primary));
	border-color: rgb(var(--color-border-primary));
	box-shadow: none;
}

/* Text Inputs */
.theme-input {
	display: block;
	width: 100%;
	border-radius: 0.375rem;
	border: 0;
	padding: 0.5rem 0.75rem;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	background-color: white;
	color: rgb(17 24 39);
	--tw-ring-inset: inset;
	--tw-ring-color: rgb(209 213 219);
	ring-width: 1px;
}

.theme-input::placeholder {
	color: rgb(156 163 175);
}

.theme-input:focus {
	--tw-ring-color: rgb(132 204 22);
	ring-width: 2px;
	outline: none;
}

.dark .theme-input {
	background-color: rgb(var(--color-surface-secondary));
	color: rgb(var(--color-text-primary));
	--tw-ring-color: rgb(var(--color-border-primary));
}

.dark .theme-input::placeholder {
	color: rgb(var(--color-text-muted));
}

.dark .theme-input:focus {
	--tw-ring-color: rgb(132 204 22);
}

/* Primary Buttons */
.theme-button-primary {
	border-radius: 0.375rem;
	background-color: rgb(132 204 22);
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: white;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	transition: background-color 150ms;
}

.theme-button-primary:hover {
	background-color: rgb(163 230 53);
}

.theme-button-primary:disabled {
	background-color: rgb(209 213 219);
	cursor: not-allowed;
}

.dark .theme-button-primary {
	background-color: rgb(163 230 53);
}

.dark .theme-button-primary:hover {
	background-color: rgb(190 242 100);
}

.dark .theme-button-primary:disabled {
	background-color: rgb(55 65 81);
}

/* Secondary Buttons */
.theme-button-secondary {
	border-radius: 0.375rem;
	background-color: white;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: rgb(17 24 39);
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--tw-ring-inset: inset;
	--tw-ring-color: rgb(209 213 219);
	ring-width: 1px;
	transition: background-color 150ms;
}

.theme-button-secondary:hover {
	background-color: rgb(249 250 251);
}

.dark .theme-button-secondary {
	background-color: rgb(var(--color-surface-primary));
	color: rgb(var(--color-text-primary));
	--tw-ring-color: rgb(var(--color-border-primary));
}

.dark .theme-button-secondary:hover {
	background-color: rgb(var(--color-surface-hover));
}

/* ========================================
   LOGO STYLES - Animated Neural Network
   ======================================== */

/* Logo text gradient - Large size (auth pages) */
.logo-text {
	font-size: 2.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	background: linear-gradient(135deg, #bef264 0%, #34d399 50%, #22d3ee 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 4px 12px rgba(163, 230, 53, 0.4)) 
	        drop-shadow(0 2px 4px rgba(16, 185, 129, 0.3));
}

.dark .logo-text {
	background: linear-gradient(135deg, #bef264 0%, #34d399 50%, #22d3ee 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 4px 12px rgba(163, 230, 53, 0.4)) 
	        drop-shadow(0 2px 8px rgba(16, 185, 129, 0.3));
}

/* Logo text gradient - Medium size */
.logo-text-md {
	font-size: 1.875rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	background: linear-gradient(135deg, #bef264 0%, #34d399 50%, #22d3ee 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 3px 8px rgba(163, 230, 53, 0.3)) 
	        drop-shadow(0 1px 3px rgba(16, 185, 129, 0.2));
}

.dark .logo-text-md {
	filter: drop-shadow(0 3px 10px rgba(163, 230, 53, 0.4)) 
	        drop-shadow(0 2px 6px rgba(16, 185, 129, 0.3));
}

/* Logo text gradient - Small size (sidebar) */
.logo-text-sm {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	background: linear-gradient(135deg, #bef264 0%, #34d399 50%, #22d3ee 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 2px 6px rgba(163, 230, 53, 0.3)) 
	        drop-shadow(0 1px 2px rgba(16, 185, 129, 0.2));
}

.dark .logo-text-sm {
	filter: drop-shadow(0 2px 8px rgba(163, 230, 53, 0.4)) 
	        drop-shadow(0 1px 4px rgba(16, 185, 129, 0.3));
}

/* SVG Icon Animations - Large */
.logo-icon {
	filter: drop-shadow(0 4px 12px rgba(163, 230, 53, 0.5)) 
	        drop-shadow(0 2px 6px rgba(16, 185, 129, 0.4));
}

.dark .logo-icon {
	filter: drop-shadow(0 4px 12px rgba(163, 230, 53, 0.5)) 
	        drop-shadow(0 2px 8px rgba(16, 185, 129, 0.4));
}

/* SVG Icon Animations - Medium */
.logo-icon-md {
	filter: drop-shadow(0 3px 8px rgba(163, 230, 53, 0.4)) 
	        drop-shadow(0 1px 4px rgba(16, 185, 129, 0.3));
}

.dark .logo-icon-md {
	filter: drop-shadow(0 3px 10px rgba(163, 230, 53, 0.4)) 
	        drop-shadow(0 2px 6px rgba(16, 185, 129, 0.3));
}

/* SVG Icon Animations - Small */
.logo-icon-sm {
	filter: drop-shadow(0 2px 6px rgba(163, 230, 53, 0.3)) 
	        drop-shadow(0 1px 3px rgba(16, 185, 129, 0.2));
}

.dark .logo-icon-sm {
	filter: drop-shadow(0 2px 8px rgba(163, 230, 53, 0.4)) 
	        drop-shadow(0 1px 4px rgba(16, 185, 129, 0.3));
}

/* Node pulse animation - grow and shrink */
.node {
	animation: nodePulse 2.5s ease-in-out infinite;
	transform-origin: center;
}

.node-1 { animation-delay: 0s; }
.node-2 { animation-delay: 0.25s; }
.node-3 { animation-delay: 0.5s; }
.node-4 { animation-delay: 0.75s; }
.node-5 { animation-delay: 1s; }
.node-6 { animation-delay: 1.25s; }
.node-center { animation-delay: 1.5s; }

@keyframes nodePulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.3);
	}
}

/* Connection fade animation */
.connection {
	animation: connectionFade 3.5s ease-in-out infinite;
}

.conn-1 { animation-delay: 0s; }
.conn-2 { animation-delay: 0.3s; }
.conn-3 { animation-delay: 0.6s; }
.conn-4 { animation-delay: 0.9s; }
.conn-5 { animation-delay: 1.2s; }
.conn-6 { animation-delay: 1.5s; }
.conn-center-1 { animation-delay: 1.8s; }
.conn-center-2 { animation-delay: 2.1s; }
.conn-center-3 { animation-delay: 2.4s; }
.conn-center-4 { animation-delay: 2.7s; }
.conn-center-5 { animation-delay: 3s; }
.conn-center-6 { animation-delay: 3.3s; }

@keyframes connectionFade {
	0%, 100% {
		opacity: 0.6;
	}
	50% {
		opacity: 0.2;
	}
}

/* Subtle hover effect for logo */
.logo-icon, .logo-icon-md, .logo-icon-sm,
.logo-text, .logo-text-md, .logo-text-sm {
	transition: transform 0.3s ease;
}

.logo-icon:hover, .logo-icon-md:hover, .logo-icon-sm:hover,
.logo-text:hover, .logo-text-md:hover, .logo-text-sm:hover {
	transform: translateY(-2px);
}

/* ========================================
   Live Update Animations
   ======================================== */

/* Highlight animation for updated content */
@keyframes highlightPulse {
	0% {
		background-color: transparent;
		box-shadow: 0 0 0 0 rgba(132, 204, 22, 0);
	}
	50% {
		background-color: rgba(132, 204, 22, 0.15);
		box-shadow: 0 0 10px 2px rgba(132, 204, 22, 0.3);
	}
	100% {
		background-color: rgba(132, 204, 22, 0.15);
		box-shadow: 0 0 10px 2px rgba(132, 204, 22, 0.3);
	}
}

.dark @keyframes highlightPulse {
	0% {
		background-color: transparent;
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
	}
	50% {
		background-color: rgba(16, 185, 129, 0.15);
		box-shadow: 0 0 10px 2px rgba(16, 185, 129, 0.3);
	}
	100% {
		background-color: rgba(16, 185, 129, 0.15);
		box-shadow: 0 0 10px 2px rgba(16, 185, 129, 0.3);
	}
}

@keyframes highlightFade {
	from {
		background-color: rgba(132, 204, 22, 0.15);
		box-shadow: 0 0 10px 2px rgba(132, 204, 22, 0.3);
	}
	to {
		background-color: transparent;
		box-shadow: 0 0 0 0 rgba(132, 204, 22, 0);
	}
}

.dark @keyframes highlightFade {
	from {
		background-color: rgba(16, 185, 129, 0.15);
		box-shadow: 0 0 10px 2px rgba(16, 185, 129, 0.3);
	}
	to {
		background-color: transparent;
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
	}
}

/* Highlight classes for live updates */
.highlight-update {
	animation: highlightPulse 0.5s ease-in-out;
	transition: all 0.3s ease;
	border-radius: 0.375rem;
}

.highlight-success {
	animation: highlightPulse 0.5s ease-in-out;
	transition: all 0.3s ease;
	border-radius: 0.375rem;
}

.highlight-info {
	animation: highlightPulse 0.5s ease-in-out;
	transition: all 0.3s ease;
	border-radius: 0.375rem;
}

.highlight-fade {
	animation: highlightFade 1.5s ease-out forwards;
}

/* Pulse animation for status indicators */
@keyframes pulse {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.05);
		opacity: 0.8;
	}
}

.pulse-animation {
	animation: pulse 1s ease-in-out;
}

/* Smooth transition for content updates */
.live-update-content {
	transition: all 0.3s ease;
}

/* Processing status badge animation */
@keyframes processingPulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

.processing-indicator {
	animation: processingPulse 2s ease-in-out infinite;
}