@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700;900&family=Work+Sans:wght@400;500;700;900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: "Work Sans", "Noto Sans", system-ui, sans-serif;
  }
  
  body {
    @apply bg-gray-50 text-gray-900 antialiased dark:bg-dark-bg dark:text-gray-100;
  }
}

@layer components {
  .menu-item {
    @apply flex items-center gap-3 px-3 py-2 rounded-xl transition-all duration-200 
           hover:bg-gray-100 dark:hover:bg-dark-hover cursor-pointer;
  }
  
  .menu-item.active {
    @apply bg-primary bg-opacity-15 text-primary dark:bg-opacity-20;
  }

  .activity-line {
    @apply w-[2px] bg-gray-200 dark:bg-gray-700;
  }

  .checkbox-custom {
    @apply h-5 w-5 rounded border-gray-300 dark:border-gray-600 text-primary 
      focus:ring-2 focus:ring-primary/20 focus:ring-offset-0 
      focus:outline-none transition-all duration-200
      checked:bg-primary checked:border-primary
      dark:bg-dark-hover dark:checked:bg-primary;
  }
}

/* Custom checkbox styles */
.checkbox-custom {
  background-image: var(--checkbox-tick-svg);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}