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

@layer base {
  html {
    font-family: 'Inter', system-ui, sans-serif;
    @apply text-slate-900 bg-[#f8f9fa];
    /* Google Docs off-white */
  }
}

@layer components {

  /* Minimal Button - Text based or subtle outline */
  .btn-minimal {
    @apply px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-200;
  }

  .btn-primary {
    @apply bg-slate-900 text-white hover:bg-slate-700;
  }

  .btn-ghost {
    @apply text-slate-600 hover:bg-slate-200;
  }

  /* Notebook Card */
  .notebook-card {
    @apply bg-white border border-slate-200 rounded-xl shadow-sm;
  }
}

/* Custom Scrollbar for subtle look */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #cbd5e1;
}