:root {
  /* Split Theme - Bold Contrasting Colors */
  --primary: 239 68 68; /* red-500 */
  --primary-foreground: 255 255 255;
  
  --secondary: 59 130 246; /* blue-500 */
  --secondary-foreground: 255 255 255;
  
  --accent: 168 85 247; /* purple-500 */
  --accent-foreground: 255 255 255;
  
  --background: 0 0 0; /* black */
  --foreground: 255 255 255;
  
  --card: 17 24 39; /* gray-900 */
  --card-foreground: 255 255 255;
  
  --popover: 17 24 39;
  --popover-foreground: 255 255 255;
  
  --muted: 55 65 81; /* gray-700 */
  --muted-foreground: 156 163 175; /* gray-400 */
  
  --destructive: 220 38 38; /* red-600 */
  --destructive-foreground: 255 255 255;
  
  --border: 75 85 99; /* gray-600 */
  --input: 55 65 81; /* gray-700 */
  --ring: 239 68 68; /* red-500 */
  
  --radius: 1.5rem;
  
  /* Split gradients */
  --gradient-red: linear-gradient(135deg, rgb(239, 68, 68), rgb(245, 101, 101));
  --gradient-blue: linear-gradient(135deg, rgb(59, 130, 246), rgb(96, 165, 250));
  --gradient-split: linear-gradient(90deg, rgb(239, 68, 68) 50%, rgb(59, 130, 246) 50%);
  --gradient-diagonal: linear-gradient(45deg, rgb(239, 68, 68) 0%, rgb(239, 68, 68) 45%, transparent 50%, transparent 55%, rgb(59, 130, 246) 100%);
  
  /* Split shadows */
  --shadow-red: 0 10px 30px rgba(239, 68, 68, 0.3);
  --shadow-blue: 0 10px 30px rgba(59, 130, 246, 0.3);
  --shadow-split: 0 20px 40px rgba(0, 0, 0, 0.4);
  
  /* Pattern backgrounds */
  --pattern-red: radial-gradient(circle at 25% 25%, rgba(239, 68, 68, 0.1) 1px, transparent 1px);
  --pattern-blue: linear-gradient(45deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
}

/* Split animations */
@keyframes split-entrance {
  0% { 
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
  100% { 
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes split-hover {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(5deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes color-split {
  0%, 100% { 
    background: linear-gradient(90deg, rgb(239, 68, 68) 50%, rgb(59, 130, 246) 50%);
  }
  50% { 
    background: linear-gradient(90deg, rgb(59, 130, 246) 50%, rgb(239, 68, 68) 50%);
  }
}

@keyframes glow-split {
  0%, 100% { 
    box-shadow: 
      -10px 0 20px rgba(239, 68, 68, 0.3),
      10px 0 20px rgba(59, 130, 246, 0.3);
  }
  50% { 
    box-shadow: 
      -10px 0 30px rgba(239, 68, 68, 0.5),
      10px 0 30px rgba(59, 130, 246, 0.5);
  }
}

/* Split visual effects */
.split-effect {
  position: relative;
  overflow: hidden;
}

.split-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, rgb(239, 68, 68), rgb(59, 130, 246));
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Dual color text */
.split-text {
  background: linear-gradient(90deg, rgb(239, 68, 68) 50%, rgb(59, 130, 246) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Alternating layouts */
.split-left {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(245, 101, 101, 0.05));
  border-right: 2px solid rgba(239, 68, 68, 0.3);
}

.split-right {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(96, 165, 250, 0.05));
  border-left: 2px solid rgba(59, 130, 246, 0.3);
}

/* Split buttons */
.split-button {
  position: relative;
  background: linear-gradient(90deg, rgb(239, 68, 68) 50%, rgb(59, 130, 246) 50%);
  transition: all 0.3s ease;
}

.split-button:hover {
  background: linear-gradient(90deg, rgb(220, 38, 38) 50%, rgb(37, 99, 235) 50%);
  transform: scale(1.05);
  animation: glow-split 1s ease-in-out;
}

/* Split cards */
.split-card {
  position: relative;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid rgba(75, 85, 99, 0.5);
  transition: all 0.3s ease;
}

.split-card:hover {
  transform: rotateY(5deg);
  box-shadow: var(--shadow-split);
}

.split-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-split);
}

/* Rotating split elements */
.rotate-split {
  animation: split-hover 3s ease-in-out infinite;
}

/* Contrasting sections */
.contrast-section {
  position: relative;
}

.contrast-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 20%, 
    rgba(255, 255, 255, 0.5) 50%, 
    rgba(255, 255, 255, 0.3) 80%, 
    transparent 100%);
  transform: translateX(-50%);
}

/* Dual navigation styles */
.nav-split-left {
  border-right: 2px solid rgba(239, 68, 68, 0.3);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), transparent);
}

.nav-split-right {
  border-left: 2px solid rgba(59, 130, 246, 0.3);
  background: linear-gradient(135deg, transparent, rgba(59, 130, 246, 0.05));
}

/* Custom scrollbar for split theme */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(17, 24, 39, 0.8);
}

::-webkit-scrollbar-thumb {
  background: var(--gradient-split);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, rgb(220, 38, 38) 50%, rgb(37, 99, 235) 50%);
}