:root {
  --primary: #FF6B6B;
  --secondary: #4ECDC4;
  --bg-light: #FFF9F5;
  --bg-dark: #1A1A2E;
  --text-dark: #2D3436;
  --text-light: #E8E8E8;
  --success: #00B894;
  --card-light: #FFFFFF;
  --card-dark: #252542;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Bricolage Grotesque', sans-serif;
  background: var(--bg-light);
  min-height: 100vh;
  transition: background 0.3s ease;
}

body.dark {
  background: var(--bg-dark);
}

.card-shadow {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.dark .card-shadow {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

@keyframes bounceCheck {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

@keyframes confetti {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(-100px) rotate(720deg); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.animate-bounce-check {
  animation: bounceCheck 0.4s ease-out;
}

.animate-slide-up {
  animation: slideUp 0.4s ease-out forwards;
}

.confetti-particle {
  position: absolute;
  animation: confetti 0.8s ease-out forwards;
  pointer-events: none;
}

.habit-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.habit-card:hover {
  transform: translateY(-2px);
}

.progress-ring {
  transform: rotate(-90deg);
}

.nav-item {
  transition: all 0.2s ease;
}

.nav-item.active {
  color: var(--primary);
}

.modal-backdrop {
  backdrop-filter: blur(8px);
}

.achievement-locked {
  filter: grayscale(100%) opacity(0.4);
}

.streak-fire {
  animation: pulse 1.5s ease-in-out infinite;
}

.mini-heatmap-cell {
  transition: all 0.2s ease;
}

.fab-button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fab-button:hover {
  transform: scale(1.1) rotate(90deg);
}

.toggle-switch {
  transition: background 0.3s ease;
}

.toggle-knob {
  transition: transform 0.3s ease;
}

input:focus, button:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .desktop-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 80px;
    flex-direction: column;
    padding-top: 2rem;
  }
  
  .main-content {
    margin-left: 80px;
  }
}