:root {
  --color-primary: #3b82f6;
  --color-secondary: #6366f1;
  --color-accent: #10b981;
  --bg-gradient: linear-gradient(110deg, #f8fafc 0%, #f0f5ff 100%);
  --glass-bg: rgba(255,255,255,0.08);
  --shadow-depth: 0 10px 25px -5px rgba(0,0,0,0.1);
}

.dark {
  --color-primary: #60a5fa;
  --color-secondary: #9333ea;
  --color-accent: #50f995;
  --bg-gradient: linear-gradient(110deg, #111827 0%, #1f2937 100%);
  --glass-bg: rgba(255,255,255,0.05);
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}

.component-card {
  background: var(--glass-bg);
  border-radius: 1.5rem;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  animation: float 6s ease-in-out infinite;
}

.callout {
  position: relative;
  padding-left: 1.5rem;
  border-left: 3px solid var(--color-accent);
}

.callout::before {
  content: "👉";
  position: absolute;
  left: 0;
  top: 0.25rem;
  font-size: 1.5rem;
  color: var(--color-secondary);
}

@layer components {
  .elf-button {
    @apply px-6 py-3 rounded-full text-white font-medium shadow-lg hover:shadow-xl transition-all duration-200;
    background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
  }
  
  .elf-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
  }
  
  .elf-loader {
    @apply border-t-2 border-white rounded-full w-8 h-8;
    border-color: transparent;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    to { transform: rotate(1turn); }
  }
}