/* SickleCare Design System */

:root {
  /* Premium Colors */
  --color-primary: #2563eb;
  --color-primary-light: #eff6ff;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-success: #10b981;
  --color-surface: #ffffff;
  --color-background: #f8fafc;
  
  /* Shadows */
  --shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  --shadow-floating: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
  --shadow-inner-glow: inset 0 2px 4px rgba(255, 255, 255, 0.8);
}

body {
  background-color: var(--color-background);
}

/* Glassmorphism Effect */
.glass-panel {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-floating);
}

/* Floating Cards */
.premium-card {
  background: var(--color-surface);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.premium-card:active {
  transform: scale(0.98);
}

/* Custom Range Slider (Pain Score) */
.pain-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 12px;
  background: #e2e8f0;
  border-radius: 99px;
  outline: none;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.pain-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4), inset 0 2px 4px rgba(255,255,255,0.4);
  transition: transform 0.1s ease;
}

.pain-slider::-webkit-slider-thumb:active {
  transform: scale(1.15);
}

/* Hydration Glass Fill Animation */
.water-fill {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 0 0 10px 10px;
}

.hydration-glass {
  border: 2px solid #e2e8f0;
  border-radius: 4px 4px 12px 12px;
  background: #f8fafc;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.02);
}
.hydration-glass.filled {
  border-color: #38bdf8;
  background: #eff6ff;
}

/* Pulse animation for active indicators */
@keyframes soft-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
  70% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
.animate-soft-pulse {
  animation: soft-pulse 2s infinite;
}

/* Bottom Sheet Modal Animation */
.bottom-sheet-enter {
  transform: translateY(100%);
}
.bottom-sheet-enter-active {
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bottom-sheet-leave {
  transform: translateY(0);
}
.bottom-sheet-leave-active {
  transform: translateY(100%);
  transition: transform 0.3s ease-in;
}