/* VibraKernel v1.0 — Global kernel styles & design tokens */

/* ─── Design Tokens ─── */
:root {
  /* Brand */
  --vk-purple:       #7c3aed;
  --vk-purple-light: #a78bfa;
  --vk-purple-dark:  #4c1d95;
  --vk-cyan:         #00d4ff;
  --vk-green:        #00ff88;
  --vk-pink:         #ff4acd;
  --vk-orange:       #ff7700;
  --vk-red:          #ff4466;
  --vk-yellow:       #ffcc00;

  /* Surfaces */
  --vk-bg-base:      #050510;
  --vk-bg-panel:     rgba(10,10,30,0.97);
  --vk-bg-card:      rgba(15,15,40,0.9);
  --vk-bg-glass:     rgba(255,255,255,0.04);
  --vk-bg-glass-md:  rgba(255,255,255,0.08);

  /* Borders */
  --vk-border:       rgba(124,58,237,0.25);
  --vk-border-glow:  rgba(124,58,237,0.6);

  /* Text */
  --vk-text-primary:   #ffffff;
  --vk-text-secondary: #a0a0c0;
  --vk-text-muted:     #606080;
  --vk-text-accent:    var(--vk-purple-light);

  /* Spacing */
  --vk-space-xs: 4px;
  --vk-space-sm: 8px;
  --vk-space-md: 16px;
  --vk-space-lg: 24px;
  --vk-space-xl: 32px;

  /* Radius */
  --vk-radius-sm: 8px;
  --vk-radius-md: 12px;
  --vk-radius-lg: 20px;
  --vk-radius-xl: 28px;
  --vk-radius-full: 9999px;

  /* Safe areas */
  --vk-safe-top:    env(safe-area-inset-top, 0px);
  --vk-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Animations */
  --vk-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --vk-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --vk-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Z-index scale */
  --vk-z-panel:   200;
  --vk-z-drawer:  300;
  --vk-z-modal:   400;
  --vk-z-toast:   500;
  --vk-z-kernel:  9999;
}

/* ─── Kernel Animations ─── */
@keyframes vk-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes vk-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes vk-slide-right {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes vk-scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes vk-pulse-ring {
  0%   { transform: scale(0.9); opacity: 0.8; }
  50%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

@keyframes vk-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(124,58,237,0.3); }
  50%       { box-shadow: 0 0 40px rgba(124,58,237,0.7), 0 0 60px rgba(124,58,237,0.3); }
}

@keyframes vk-spin {
  to { transform: rotate(360deg); }
}

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

@keyframes vk-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ─── Utility classes ─── */
.vk-fade-in   { animation: vk-fade-in 0.3s var(--vk-ease-smooth) both; }
.vk-scale-in  { animation: vk-scale-in 0.3s var(--vk-ease-bounce) both; }
.vk-slide-up  { animation: vk-slide-up 0.4s var(--vk-ease-spring) both; }

.vk-glass {
  background: var(--vk-bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--vk-border);
  border-radius: var(--vk-radius-lg);
}

.vk-card {
  background: var(--vk-bg-card);
  border: 1px solid var(--vk-border);
  border-radius: var(--vk-radius-md);
  padding: var(--vk-space-md);
}

.vk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vk-space-sm);
  padding: 10px 20px;
  border-radius: var(--vk-radius-md);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all 0.2s var(--vk-ease-smooth);
  white-space: nowrap;
}

.vk-btn-primary {
  background: linear-gradient(135deg, var(--vk-purple), var(--vk-purple-dark));
  color: #fff;
  box-shadow: 0 4px 20px rgba(124,58,237,0.3);
}

.vk-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 30px rgba(124,58,237,0.5);
}

.vk-btn-ghost {
  background: var(--vk-bg-glass-md);
  color: var(--vk-text-secondary);
}

.vk-btn-ghost:hover {
  background: var(--vk-bg-glass);
  color: var(--vk-text-primary);
}

/* VBC Badge */
.vk-vbc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(167,139,250,0.1));
  border: 1px solid rgba(124,58,237,0.4);
  border-radius: var(--vk-radius-full);
  color: var(--vk-purple-light);
  font-weight: 700;
  font-size: 13px;
}

/* Zone score pill */
.vk-zone-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--vk-radius-full);
  font-size: 11px;
  font-weight: 700;
  background: rgba(0,212,255,0.15);
  color: var(--vk-cyan);
  border: 1px solid rgba(0,212,255,0.3);
}

/* Scrollbar kernel-wide override */
.vk-scroll::-webkit-scrollbar       { width: 3px; }
.vk-scroll::-webkit-scrollbar-track { background: transparent; }
.vk-scroll::-webkit-scrollbar-thumb { background: var(--vk-purple); border-radius: 99px; }

/* Skeleton shimmer */
.vk-skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 200% auto;
  animation: vk-shimmer 1.5s linear infinite;
  border-radius: var(--vk-radius-sm);
}

/* Kernel status indicator */
#vk-status {
  position: fixed;
  bottom: calc(var(--vk-safe-bottom) + 72px);
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vk-green);
  box-shadow: 0 0 8px var(--vk-green);
  z-index: var(--vk-z-kernel);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

#vk-status.vk-status-visible {
  opacity: 1;
  animation: vk-pulse-ring 2s ease-in-out infinite;
}

#vk-status.vk-status-offline {
  background: var(--vk-red);
  box-shadow: 0 0 8px var(--vk-red);
}

/* VBC earn floating particle */
.vk-vbc-particle {
  position: fixed;
  font-weight: 900;
  font-size: 16px;
  color: var(--vk-purple-light);
  pointer-events: none;
  z-index: var(--vk-z-toast);
  animation: vk-float-up 1.2s ease-out forwards;
}

@keyframes vk-float-up {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  50%  { opacity: 1; transform: translateY(-30px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.8); }
}