/* Reshape.krd Design System - Reshape Quantum */

:root {
  --color-primary: #004ac6;
  --color-primary-container: #2563eb;
  --color-tertiary: #632ecd;
  --color-tertiary-container: #7d4ce7;
  --color-secondary: #006c49;
  --color-secondary-container: #6cf8bb;
  --color-surface: #faf8ff;
  --color-background: #faf8ff;
  --color-on-surface: #131b2e;
  --color-on-surface-variant: #434655;
  --color-outline-variant: #c3c6d7;
}

/* Glassmorphism Styles */
.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 74, 198, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 20px 40px rgba(15, 23, 42, 0.04);
}

.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 74, 198, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 20px 40px rgba(15, 23, 42, 0.04);
}

.glass-panel-dark {
  background: rgba(20, 25, 40, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.hero-gradient {
  background: linear-gradient(135deg, #faf8ff 0%, #edf1ff 50%, #eef0ff 100%);
}

.diffuse-shadow {
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

.hover-lift {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
}

.gradient-text {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f3fa;
}

::-webkit-scrollbar-thumb {
  background: #c3c6d7;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #004ac6;
}

/* Keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.15;
    transform: scale(1);
  }
  50% {
    opacity: 0.25;
    transform: scale(1.05);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-pulse-glow {
  animation: pulseGlow 6s ease-in-out infinite;
}

/* Modal and Drawer Transitions */
.modal-backdrop {
  background-color: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}