:root {
  --surface-50: 248 250 252;
  --surface-100: 241 245 249;
  --surface-200: 226 232 240;
  --surface-300: 203 213 225;
  --surface-400: 148 163 184;
  --surface-500: 100 116 139;
  --surface-600: 71 85 105;
  --surface-700: 51 65 85;
  --surface-800: 30 41 59;
  --surface-900: 15 23 42;
  --surface-950: 2 6 23;
}

.dark {
  --surface-50: 2 6 23;
  --surface-100: 15 23 42;
  --surface-200: 30 41 59;
  --surface-300: 51 65 85;
  --surface-400: 71 85 105;
  --surface-500: 100 116 139;
  --surface-600: 148 163 184;
  --surface-700: 203 213 225;
  --surface-800: 226 232 240;
  --surface-900: 241 245 249;
  --surface-950: 248 250 252;
}

body {
  @apply bg-surface-50 text-surface-900 dark:bg-surface-900 dark:text-surface-100 font-sans;
}

.card {
  @apply bg-white dark:bg-surface-800 rounded-xl shadow-sm border border-surface-200 dark:border-surface-700;
}

.btn-primary {
  @apply bg-primary-600 hover:bg-primary-700 text-white font-medium;
}

.btn-secondary {
  @apply bg-surface-100 hover:bg-surface-200 dark:bg-surface-700 dark:hover:bg-surface-600 text-surface-800 dark:text-surface-200 font-medium;
}

.btn-danger {
  @apply bg-red-600 hover:bg-red-700 text-white font-medium;
}

.input-field {
  @apply w-full px-4 py-2 rounded-lg border border-surface-300 dark:border-surface-600 bg-surface-50 dark:bg-surface-800 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition;
}

.modal-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-50 flex items-center justify-center p-4;
}

.modal-content {
  @apply bg-white dark:bg-surface-800 rounded-2xl shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto animate-fade-in;
}

.calendar-item {
  @apply flex items-center justify-between p-4 rounded-xl transition-all hover:bg-surface-100 dark:hover:bg-surface-700 cursor-pointer;
}

.permission-item {
  @apply flex items-center gap-3 p-2 rounded-lg hover:bg-surface-100 dark:hover:bg-surface-700 transition cursor-pointer;
}

.shared-user-item {
  @apply flex items-center justify-between p-3 rounded-lg bg-surface-100 dark:bg-surface-700;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fade-in 0.2s ease-out forwards;
}

.calendar-button {
  transition: box-shadow 0.15s, transform 0.15s;
}

.calendar-button:hover {
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-2px) scale(1.02);
}

@media (max-width: 640px) {
  .modal-content {
    @apply max-w-full w-full rounded-none;
  }
  
  #searchBar {
    @apply w-full;
  }
}

.btn-success {
  @apply px-4 py-2 rounded-lg bg-green-100 text-green-700 hover:bg-green-200 font-medium transition;
}

.btn-danger {
  @apply px-4 py-2 rounded-lg bg-red-100 text-red-700 hover:bg-red-200 font-medium transition;
}