:root {
  /* Paleta clara inspirada no OneDrive/Fluent */
  --bg-0: #eef1f7;   /* fundo geral da app (azul-acinzentado muito claro) */
  --bg-1: #ffffff;   /* barra lateral / topo */
  --bg-2: #f3f5fa;   /* fundo das colunas do quadro */
  --bg-3: #ffffff;   /* cartões / modais */
  --bg-4: #eaeff9;   /* hover */
  --bg-5: #dde5f3;   /* estado activo / pressed */

  --line-1: #e4e8f1;  /* contornos subtis */
  --line-2: #cfd7e6;  /* contornos visíveis (inputs, botões) */

  --ink-1: #1b2430;   /* texto principal */
  --ink-2: #5c6577;   /* texto secundário */
  --ink-3: #8991a3;   /* texto apagado / placeholders */

  --brand: #0078d4;   /* azul OneDrive — único acento de marca */
  --brand-ink: #ffffff;
}

* { scrollbar-color: var(--line-2) transparent; }

html, body {
  background: var(--bg-0);
  color: var(--ink-1);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.font-display { font-family: 'Space Grotesk', 'Inter', sans-serif; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg-5); }

.board-scroll { scrollbar-width: thin; }

.card-dragging { opacity: 0.45; }

.list-dropzone-active {
  background: var(--bg-4) !important;
  outline: 1px dashed var(--line-2);
  outline-offset: -6px;
}

.card-placeholder {
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  height: 3.25rem;
  background: var(--bg-2);
}

/* Cartões com sombra suave, ao estilo Fluent/OneDrive */
.board-card {
  box-shadow: 0 1px 2px rgba(20, 30, 60, 0.06);
}
.board-card:hover {
  box-shadow: 0 4px 14px rgba(20, 30, 60, 0.10);
}

.nb-check {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--line-2);
  background: var(--bg-3);
  display: inline-block;
  position: relative;
  cursor: pointer;
  flex: none;
}
.nb-check:checked {
  background: var(--brand);
  border-color: var(--brand);
}
.nb-check:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@keyframes nb-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.nb-modal-pop { animation: nb-pop 140ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  .nb-modal-pop { animation: none; }
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.avatar-stack > * + * { margin-left: -8px; }