/* Cynthia Gardens Command Center - Complete CSS Export */

:root {
  /* Light Theme - Green Futuristic */
  --background: 0 0% 100%;
  --foreground: 120 15% 15%;

  --card: 0 0% 100%;
  --card-foreground: 120 15% 15%;
 
  --popover: 0 0% 100%;
  --popover-foreground: 120 15% 15%;
 
  --primary: 142 76% 36%;
  --primary-foreground: 0 0% 100%;
 
  --secondary: 120 30% 90%;
  --secondary-foreground: 120 15% 15%;
 
  --muted: 120 20% 95%;
  --muted-foreground: 120 16.3% 46.9%;
 
  --accent: 120 100% 25%;
  --accent-foreground: 0 0% 100%;
 
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;

  --border: 120 30% 85%;
  --input: 120 30% 90%;
  --ring: 142 76% 36%;
 
  --radius: 0.75rem;
  
  /* Futuristic Gradient Variables - Green Theme */
  --gradient-primary: linear-gradient(135deg, hsl(142 76% 36%), hsl(120 100% 25%));
  --gradient-secondary: linear-gradient(135deg, hsl(120 60% 50%), hsl(142 80% 40%));
  --gradient-accent: linear-gradient(135deg, hsl(120 100% 30%), hsl(140 100% 35%));
  --glow-primary: 0 0 12px hsla(142, 76%, 36%, 0.25);
  --glow-accent: 0 0 8px hsla(120, 100%, 25%, 0.2);
}
 
.dark {
  /* Dark Theme - Green Cyberpunk Neon */
  --background: 120 25% 8%;
  --foreground: 120 100% 95%;
 
  --card: 120 20% 10%;
  --card-foreground: 120 100% 95%;
 
  --popover: 120 20% 10%;
  --popover-foreground: 120 100% 95%;
 
  --primary: 120 100% 70%;
  --primary-foreground: 120 25% 8%;
 
  --secondary: 140 100% 15%;
  --secondary-foreground: 120 100% 95%;
 
  --muted: 120 15% 15%;
  --muted-foreground: 120 20.2% 65.1%;
 
  --accent: 142 100% 65%;
  --accent-foreground: 120 25% 8%;
 
  --destructive: 0 75% 55%;
  --destructive-foreground: 0 0% 98%;
 
  --border: 120 15% 20%;
  --input: 120 15% 18%;
  --ring: 120 100% 70%;
  
  /* Dark Futuristic Gradient Variables - Green Theme */
  --gradient-primary: linear-gradient(135deg, hsl(120 100% 70%), hsl(142 100% 75%));
  --gradient-secondary: linear-gradient(135deg, hsl(140 100% 40%), hsl(120 80% 60%));
  --gradient-accent: linear-gradient(135deg, hsl(142 100% 65%), hsl(120 100% 70%));
  --glow-primary: 0 0 15px hsla(120, 100%, 70%, 0.35);
  --glow-accent: 0 0 10px hsla(142, 100%, 65%, 0.3);
}

* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  background-image: 
    radial-gradient(circle at 20% 80%, hsla(142, 76%, 36%, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, hsla(120, 100%, 25%, 0.1) 0%, transparent 50%);
  background-attachment: fixed;
}

/* Futuristic UI Components */
.futuristic-header {
  background: linear-gradient(90deg, 
    hsla(120, 25%, 95%, 0.9) 0%, 
    hsla(142, 100%, 98%, 0.95) 50%, 
    hsla(120, 25%, 95%, 0.9) 100%);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid hsla(142, 76%, 36%, 0.3);
  box-shadow: 0 4px 20px hsla(142, 76%, 36%, 0.1);
}

.dark .futuristic-header {
  background: linear-gradient(90deg, 
    hsla(120, 25%, 8%, 0.9) 0%, 
    hsla(142, 100%, 10%, 0.95) 50%, 
    hsla(120, 25%, 8%, 0.9) 100%);
  border-bottom: 1px solid hsla(120, 100%, 70%, 0.3);
  box-shadow: 0 4px 20px hsla(120, 100%, 70%, 0.1);
}

.futuristic-sidebar {
  background: linear-gradient(180deg, 
    hsla(120, 25%, 98%, 0.95) 0%, 
    hsla(142, 80%, 97%, 0.98) 100%);
  backdrop-filter: blur(10px);
  border-right: 1px solid hsla(142, 76%, 36%, 0.2);
}

.dark .futuristic-sidebar {
  background: linear-gradient(180deg, 
    hsla(120, 25%, 8%, 0.95) 0%, 
    hsla(142, 80%, 5%, 0.98) 100%);
  border-right: 1px solid hsla(120, 100%, 70%, 0.2);
}

/* Enhanced navigation hover effects */
.futuristic-sidebar .hover\:bg-primary\/20:hover {
  background: linear-gradient(135deg, 
    hsla(142, 76%, 36%, 0.15) 0%, 
    hsla(120, 100%, 25%, 0.2) 100%) !important;
  box-shadow: 0 2px 10px hsla(142, 76%, 36%, 0.2);
}

.dark .futuristic-sidebar .hover\:bg-primary\/20:hover {
  background: linear-gradient(135deg, 
    hsla(120, 100%, 70%, 0.15) 0%, 
    hsla(142, 100%, 65%, 0.2) 100%) !important;
  box-shadow: 0 2px 10px hsla(120, 100%, 70%, 0.2);
}

.futuristic-card {
  background: linear-gradient(135deg, 
    hsla(120, 25%, 99%, 0.8) 0%, 
    hsla(142, 40%, 98%, 0.9) 100%);
  border: 1px solid hsla(142, 76%, 36%, 0.3);
  box-shadow: var(--glow-primary);
  backdrop-filter: blur(8px);
}

.dark .futuristic-card {
  background: linear-gradient(135deg, 
    hsla(120, 25%, 12%, 0.8) 0%, 
    hsla(142, 40%, 8%, 0.9) 100%);
  border: 1px solid hsla(120, 100%, 70%, 0.3);
}

.futuristic-button-primary {
  background: var(--gradient-primary);
  box-shadow: var(--glow-primary);
  border: 1px solid hsla(142, 76%, 36%, 0.5);
  transition: all 0.3s ease;
  color: hsl(var(--primary-foreground));
}

.dark .futuristic-button-primary {
  border: 1px solid hsla(120, 100%, 70%, 0.5);
}

.futuristic-button-primary:hover {
  box-shadow: var(--glow-primary), 0 0 30px hsla(142, 76%, 36%, 0.4);
  transform: translateY(-2px);
}

.dark .futuristic-button-primary:hover {
  box-shadow: var(--glow-primary), 0 0 30px hsla(120, 100%, 70%, 0.4);
}

.futuristic-input {
  background: hsla(120, 25%, 98%, 0.6);
  border: 1px solid hsla(142, 76%, 36%, 0.4);
  box-shadow: inset 0 2px 8px hsla(120, 25%, 90%, 0.3);
}

.dark .futuristic-input {
  background: hsla(120, 25%, 8%, 0.6);
  border: 1px solid hsla(120, 100%, 70%, 0.4);
  box-shadow: inset 0 2px 8px hsla(120, 25%, 0%, 0.3);
}

.futuristic-input:focus {
  box-shadow: var(--glow-accent), inset 0 2px 8px hsla(120, 25%, 90%, 0.3);
  border-color: hsl(142, 76%, 36%);
  outline: none;
}

.dark .futuristic-input:focus {
  box-shadow: var(--glow-accent), inset 0 2px 8px hsla(120, 25%, 0%, 0.3);
  border-color: hsl(120, 100%, 70%);
}

.neon-text {
  color: hsl(142, 76%, 36%);
  text-shadow: 
    0 0 2px hsla(142, 76%, 36%, 0.3),
    0 0 4px hsla(142, 76%, 36%, 0.2),
    0 0 6px hsla(142, 76%, 36%, 0.1);
}

.dark .neon-text {
  color: hsl(120, 100%, 70%);
  text-shadow: 
    0 0 3px hsla(120, 100%, 70%, 0.4),
    0 0 6px hsla(120, 100%, 70%, 0.25),
    0 0 8px hsla(120, 100%, 70%, 0.15);
}

.cyber-border {
  position: relative;
}

.cyber-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  background: var(--gradient-primary);
  border-radius: inherit;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: subtract;
}

/* Animated gradient backgrounds */
.animated-gradient {
  background: linear-gradient(45deg, 
    hsl(142, 76%, 36%), 
    hsl(120, 100%, 25%), 
    hsl(140, 100%, 30%), 
    hsl(142, 80%, 40%));
  background-size: 400% 400%;
  animation: gradientFlow 6s ease infinite;
}

.dark .animated-gradient {
  background: linear-gradient(45deg, 
    hsl(120, 100%, 70%), 
    hsl(142, 100%, 65%), 
    hsl(140, 100%, 60%), 
    hsl(120, 80%, 75%));
}

@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
  from { box-shadow: var(--glow-primary); }
  to { box-shadow: var(--glow-primary), var(--glow-accent); }
}

/* Text colors using CSS variables */
.text-primary {
  color: hsl(var(--primary));
}

.text-primary\/80 {
  color: hsl(var(--primary) / 0.8);
}

.text-primary\/70 {
  color: hsl(var(--primary) / 0.7);
}

.text-primary\/60 {
  color: hsl(var(--primary) / 0.6);
}

.text-accent {
  color: hsl(var(--accent));
}

.bg-primary {
  background-color: hsl(var(--primary));
}

.bg-accent {
  background-color: hsl(var(--accent));
}

.bg-card {
  background-color: hsl(var(--card));
}

.text-card-foreground {
  color: hsl(var(--card-foreground));
}

.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}

.border-primary\/40 {
  border-color: hsl(var(--primary) / 0.4);
}

.border-primary\/50 {
  border-color: hsl(var(--primary) / 0.5);
}

/* Performance optimizations */
* {
  will-change: auto;
}

/* Reduce paint and layout thrashing */
.futuristic-sidebar,
.futuristic-header {
  contain: layout style;
}

/* GPU acceleration for animations */
.neon-text,
.futuristic-button-primary,
.futuristic-glow {
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* Optimize text rendering */
body {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Responsive utilities */
@media (max-width: 768px) {
  .md\:hidden {
    display: none;
  }
  
  .md\:block {
    display: block;
  }
}

@media (min-width: 768px) {
  .md\:hidden {
    display: block;
  }
  
  .md\:block {
    display: block;
  }
}

/* Container styles */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1400px) {
  .container {
    max-width: 1400px;
  }
}